diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 58ce9ca397..6ce67859c7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -55,8 +55,8 @@ jobs:
           - webpack-build-server
           - basic-crud-application/angular-client
           - basic-crud-application/vue-client
-          - nextjs-pages-router-api-route
-          - nextjs-pages-router-custom-server
+          - nextjs-pages-router
+          - nextjs-app-router
 
     steps:
       - name: Checkout repository
diff --git a/examples/nextjs-pages-router-api-route/.gitignore b/examples/nextjs-app-router/.gitignore
similarity index 100%
rename from examples/nextjs-pages-router-api-route/.gitignore
rename to examples/nextjs-app-router/.gitignore
diff --git a/examples/nextjs-pages-router-custom-server/README.md b/examples/nextjs-app-router/README.md
similarity index 72%
rename from examples/nextjs-pages-router-custom-server/README.md
rename to examples/nextjs-app-router/README.md
index 5d98b1e5a0..0dc9ea2bcc 100644
--- a/examples/nextjs-pages-router-custom-server/README.md
+++ b/examples/nextjs-app-router/README.md
@@ -16,11 +16,7 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
diff --git a/examples/nextjs-pages-router-api-route/jsconfig.json b/examples/nextjs-app-router/jsconfig.json
similarity index 100%
rename from examples/nextjs-pages-router-api-route/jsconfig.json
rename to examples/nextjs-app-router/jsconfig.json
diff --git a/examples/nextjs-pages-router-custom-server/next.config.mjs b/examples/nextjs-app-router/next.config.mjs
similarity index 58%
rename from examples/nextjs-pages-router-custom-server/next.config.mjs
rename to examples/nextjs-app-router/next.config.mjs
index d5456a15d4..4678774e6d 100644
--- a/examples/nextjs-pages-router-custom-server/next.config.mjs
+++ b/examples/nextjs-app-router/next.config.mjs
@@ -1,6 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-};
+const nextConfig = {};
 
 export default nextConfig;
diff --git a/examples/nextjs-pages-router-api-route/package.json b/examples/nextjs-app-router/package.json
similarity index 86%
rename from examples/nextjs-pages-router-api-route/package.json
rename to examples/nextjs-app-router/package.json
index fcc6b745fc..c5e921eb2e 100644
--- a/examples/nextjs-pages-router-api-route/package.json
+++ b/examples/nextjs-app-router/package.json
@@ -1,7 +1,8 @@
 {
-  "name": "nextjs-pages-router-api-route",
+  "name": "nextjs-app-router",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
diff --git a/examples/nextjs-pages-router-api-route/public/next.svg b/examples/nextjs-app-router/public/next.svg
similarity index 100%
rename from examples/nextjs-pages-router-api-route/public/next.svg
rename to examples/nextjs-app-router/public/next.svg
diff --git a/examples/nextjs-pages-router-api-route/public/vercel.svg b/examples/nextjs-app-router/public/vercel.svg
similarity index 100%
rename from examples/nextjs-pages-router-api-route/public/vercel.svg
rename to examples/nextjs-app-router/public/vercel.svg
diff --git a/examples/nextjs-pages-router-custom-server/server.js b/examples/nextjs-app-router/server.js
similarity index 54%
rename from examples/nextjs-pages-router-custom-server/server.js
rename to examples/nextjs-app-router/server.js
index 90c241683f..64c873306b 100644
--- a/examples/nextjs-pages-router-custom-server/server.js
+++ b/examples/nextjs-app-router/server.js
@@ -1,5 +1,4 @@
 import { createServer } from "http";
-import { parse } from "url";
 import next from "next";
 import { Server } from "socket.io";
 
@@ -8,25 +7,12 @@ const hostname = "localhost";
 const port = 3000;
 // when using middleware `hostname` and `port` must be provided below
 const app = next({ dev, hostname, port });
-const handle = app.getRequestHandler();
+const handler = app.getRequestHandler();
 
 app.prepare().then(() => {
-  const httpServer = createServer(async (req, res) => {
-    try {
-      const parsedUrl = parse(req.url, true);
-      const { pathname, query } = parsedUrl;
+  const httpServer = createServer(handler);
 
-      await handle(req, res, parsedUrl);
-    } catch (err) {
-      console.error("Error occurred handling", req.url, err);
-      res.statusCode = 500;
-      res.end("internal server error");
-    }
-  });
-
-  const io = new Server(httpServer, {
-    pingInterval: 2000
-  });
+  const io = new Server(httpServer);
 
   io.on("connection", (socket) => {
     // ...
diff --git a/examples/nextjs-pages-router-api-route/public/favicon.ico b/examples/nextjs-app-router/src/app/favicon.ico
similarity index 100%
rename from examples/nextjs-pages-router-api-route/public/favicon.ico
rename to examples/nextjs-app-router/src/app/favicon.ico
diff --git a/examples/nextjs-pages-router-api-route/src/styles/globals.css b/examples/nextjs-app-router/src/app/globals.css
similarity index 100%
rename from examples/nextjs-pages-router-api-route/src/styles/globals.css
rename to examples/nextjs-app-router/src/app/globals.css
diff --git a/examples/nextjs-app-router/src/app/layout.js b/examples/nextjs-app-router/src/app/layout.js
new file mode 100644
index 0000000000..9aef1df7d6
--- /dev/null
+++ b/examples/nextjs-app-router/src/app/layout.js
@@ -0,0 +1,17 @@
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/nextjs-pages-router-api-route/src/pages/index.js b/examples/nextjs-app-router/src/app/page.js
similarity index 57%
rename from examples/nextjs-pages-router-api-route/src/pages/index.js
rename to examples/nextjs-app-router/src/app/page.js
index 79cda6e3bf..273fedeafd 100644
--- a/examples/nextjs-pages-router-api-route/src/pages/index.js
+++ b/examples/nextjs-app-router/src/app/page.js
@@ -1,11 +1,9 @@
-import Head from "next/head";
+"use client";
+
 import Image from "next/image";
-import { Inter } from "next/font/google";
-import styles from "@/styles/Home.module.css";
+import styles from "./page.module.css";
 import { useEffect, useState } from "react";
-import { socket } from "@/socket";
-
-const inter = Inter({ subsets: ["latin"] });
+import { socket } from "../socket";
 
 export default function Home() {
   const [isConnected, setIsConnected] = useState(false);
@@ -40,17 +38,9 @@ export default function Home() {
   }, []);
 
   return (
-    <>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <div>
-        <p>Status: { isConnected ? "connected" : "disconnected" }</p>
-        <p>Transport: { transport }</p>
-      </div>
-    </>
+    <div>
+      <p>Status: { isConnected ? "connected" : "disconnected" }</p>
+      <p>Transport: { transport }</p>
+    </div>
   );
 }
diff --git a/examples/nextjs-pages-router-custom-server/src/styles/Home.module.css b/examples/nextjs-app-router/src/app/page.module.css
similarity index 98%
rename from examples/nextjs-pages-router-custom-server/src/styles/Home.module.css
rename to examples/nextjs-app-router/src/app/page.module.css
index 827f96590b..5c4b1e6a2c 100644
--- a/examples/nextjs-pages-router-custom-server/src/styles/Home.module.css
+++ b/examples/nextjs-app-router/src/app/page.module.css
@@ -42,8 +42,8 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: var(--max-width);
-  width: 100%;
+  max-width: 100%;
+  width: var(--max-width);
 }
 
 .card {
@@ -70,6 +70,7 @@
   font-size: 0.9rem;
   line-height: 1.5;
   max-width: 30ch;
+  text-wrap: balance;
 }
 
 .center {
diff --git a/examples/nextjs-app-router/src/socket.js b/examples/nextjs-app-router/src/socket.js
new file mode 100644
index 0000000000..f7368c78c4
--- /dev/null
+++ b/examples/nextjs-app-router/src/socket.js
@@ -0,0 +1,5 @@
+"use client";
+
+import { io } from "socket.io-client";
+
+export const socket = io();
diff --git a/examples/nextjs-pages-router-api-route/src/pages/_app.js b/examples/nextjs-pages-router-api-route/src/pages/_app.js
deleted file mode 100644
index b97e52fc9a..0000000000
--- a/examples/nextjs-pages-router-api-route/src/pages/_app.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import "@/styles/globals.css";
-
-export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
diff --git a/examples/nextjs-pages-router-api-route/src/pages/api/socket.io.js b/examples/nextjs-pages-router-api-route/src/pages/api/socket.io.js
deleted file mode 100644
index dd0dd6ae2b..0000000000
--- a/examples/nextjs-pages-router-api-route/src/pages/api/socket.io.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Server } from "socket.io";
-import { Server as Engine } from "engine.io";
-
-const engine = new Engine({
-  pingInterval: 2000
-});
-
-const io = new Server();
-
-io.bind(engine);
-
-io.on("connection", (socket) => {
-  // ...
-});
-
-let once = true;
-
-export default function handler(req, res) {
-  if (once) {
-    once = false;
-    const server = req.socket.server;
-
-    // the default listener closes the websocket connection if the path does not match "/_next/webpack-hmr"
-    // see https://github.com/vercel/next.js/blob/f9d73cc2fa710a7ba90ee28f7783a8f05ea62b3a/packages/next/src/server/lib/router-server.ts#L669-L671
-    const defaultListener = server.listeners("upgrade")[0];
-    server.removeAllListeners("upgrade");
-
-    server.on("upgrade", (req, socket, head) => {
-      if (req.url.startsWith("/api/socket.io")) {
-        engine.handleUpgrade(req, socket, head);
-      } else {
-        defaultListener.call(server, req, socket, head);
-      }
-    });
-  }
-
-  engine.handleRequest(req, res);
-}
-
-export const config = {
-  api: {
-    bodyParser: false, // prevents body parsing
-    externalResolver: true, // prevents "this may result in stalled requests" warnings
-  },
-}
diff --git a/examples/nextjs-pages-router-api-route/src/socket.js b/examples/nextjs-pages-router-api-route/src/socket.js
deleted file mode 100644
index d7d4ddcd5a..0000000000
--- a/examples/nextjs-pages-router-api-route/src/socket.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { io } from "socket.io-client";
-
-const isBrowser = typeof window !== "undefined";
-
-// only create the Socket.IO client on the client side (no ssr)
-export const socket = isBrowser ? io({
-  path: "/api/socket.io",
-  addTrailingSlash: false,
-}) : {};
diff --git a/examples/nextjs-pages-router-custom-server/src/pages/_document.js b/examples/nextjs-pages-router-custom-server/src/pages/_document.js
deleted file mode 100644
index b2fff8b426..0000000000
--- a/examples/nextjs-pages-router-custom-server/src/pages/_document.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from "next/document";
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  );
-}
diff --git a/examples/nextjs-pages-router-custom-server/src/pages/api/hello.js b/examples/nextjs-pages-router-custom-server/src/pages/api/hello.js
deleted file mode 100644
index aee21e9afa..0000000000
--- a/examples/nextjs-pages-router-custom-server/src/pages/api/hello.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-
-export default function handler(req, res) {
-  res.status(200).json({ name: "John Doe" });
-}
diff --git a/examples/nextjs-pages-router-custom-server/.gitignore b/examples/nextjs-pages-router/.gitignore
similarity index 97%
rename from examples/nextjs-pages-router-custom-server/.gitignore
rename to examples/nextjs-pages-router/.gitignore
index fd3dbb571a..63c64643f5 100644
--- a/examples/nextjs-pages-router-custom-server/.gitignore
+++ b/examples/nextjs-pages-router/.gitignore
@@ -12,6 +12,7 @@
 # next.js
 /.next/
 /out/
+/src/.next/
 
 # production
 /build
diff --git a/examples/nextjs-pages-router-api-route/README.md b/examples/nextjs-pages-router/README.md
similarity index 100%
rename from examples/nextjs-pages-router-api-route/README.md
rename to examples/nextjs-pages-router/README.md
diff --git a/examples/nextjs-pages-router-custom-server/jsconfig.json b/examples/nextjs-pages-router/jsconfig.json
similarity index 100%
rename from examples/nextjs-pages-router-custom-server/jsconfig.json
rename to examples/nextjs-pages-router/jsconfig.json
diff --git a/examples/nextjs-pages-router-api-route/next.config.mjs b/examples/nextjs-pages-router/next.config.mjs
similarity index 100%
rename from examples/nextjs-pages-router-api-route/next.config.mjs
rename to examples/nextjs-pages-router/next.config.mjs
diff --git a/examples/nextjs-pages-router-custom-server/package.json b/examples/nextjs-pages-router/package.json
similarity index 88%
rename from examples/nextjs-pages-router-custom-server/package.json
rename to examples/nextjs-pages-router/package.json
index 15db2aecd9..965649cb07 100644
--- a/examples/nextjs-pages-router-custom-server/package.json
+++ b/examples/nextjs-pages-router/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "nextjs-pages-router-custom-server",
+  "name": "nextjs-pages-router",
   "version": "0.1.0",
   "private": true,
   "type": "module",
diff --git a/examples/nextjs-pages-router-custom-server/public/favicon.ico b/examples/nextjs-pages-router/public/favicon.ico
similarity index 100%
rename from examples/nextjs-pages-router-custom-server/public/favicon.ico
rename to examples/nextjs-pages-router/public/favicon.ico
diff --git a/examples/nextjs-pages-router-custom-server/public/next.svg b/examples/nextjs-pages-router/public/next.svg
similarity index 100%
rename from examples/nextjs-pages-router-custom-server/public/next.svg
rename to examples/nextjs-pages-router/public/next.svg
diff --git a/examples/nextjs-pages-router-custom-server/public/vercel.svg b/examples/nextjs-pages-router/public/vercel.svg
similarity index 100%
rename from examples/nextjs-pages-router-custom-server/public/vercel.svg
rename to examples/nextjs-pages-router/public/vercel.svg
diff --git a/examples/nextjs-pages-router/server.js b/examples/nextjs-pages-router/server.js
new file mode 100644
index 0000000000..64c873306b
--- /dev/null
+++ b/examples/nextjs-pages-router/server.js
@@ -0,0 +1,29 @@
+import { createServer } from "http";
+import next from "next";
+import { Server } from "socket.io";
+
+const dev = process.env.NODE_ENV !== "production";
+const hostname = "localhost";
+const port = 3000;
+// when using middleware `hostname` and `port` must be provided below
+const app = next({ dev, hostname, port });
+const handler = app.getRequestHandler();
+
+app.prepare().then(() => {
+  const httpServer = createServer(handler);
+
+  const io = new Server(httpServer);
+
+  io.on("connection", (socket) => {
+    // ...
+  });
+
+  httpServer
+    .once("error", (err) => {
+      console.error(err);
+      process.exit(1);
+    })
+    .listen(port, () => {
+      console.log(`> Ready on http://${hostname}:${port}`);
+    });
+});
diff --git a/examples/nextjs-pages-router-custom-server/src/pages/_app.js b/examples/nextjs-pages-router/src/pages/_app.js
similarity index 100%
rename from examples/nextjs-pages-router-custom-server/src/pages/_app.js
rename to examples/nextjs-pages-router/src/pages/_app.js
diff --git a/examples/nextjs-pages-router-api-route/src/pages/_document.js b/examples/nextjs-pages-router/src/pages/_document.js
similarity index 100%
rename from examples/nextjs-pages-router-api-route/src/pages/_document.js
rename to examples/nextjs-pages-router/src/pages/_document.js
diff --git a/examples/nextjs-pages-router-api-route/src/pages/api/hello.js b/examples/nextjs-pages-router/src/pages/api/hello.js
similarity index 100%
rename from examples/nextjs-pages-router-api-route/src/pages/api/hello.js
rename to examples/nextjs-pages-router/src/pages/api/hello.js
diff --git a/examples/nextjs-pages-router-custom-server/src/pages/index.js b/examples/nextjs-pages-router/src/pages/index.js
similarity index 95%
rename from examples/nextjs-pages-router-custom-server/src/pages/index.js
rename to examples/nextjs-pages-router/src/pages/index.js
index b34ef1d296..dbc98fdc9a 100644
--- a/examples/nextjs-pages-router-custom-server/src/pages/index.js
+++ b/examples/nextjs-pages-router/src/pages/index.js
@@ -18,7 +18,7 @@ export default function Home() {
 
     function onConnect() {
       setIsConnected(true);
-      setTransport(socket.io.engine.transport.name || "N/A");
+      setTransport(socket.io.engine.transport.name);
 
       socket.io.engine.on("upgrade", (transport) => {
         setTransport(transport.name);
diff --git a/examples/nextjs-pages-router-custom-server/src/socket.js b/examples/nextjs-pages-router/src/socket.js
similarity index 100%
rename from examples/nextjs-pages-router-custom-server/src/socket.js
rename to examples/nextjs-pages-router/src/socket.js
diff --git a/examples/nextjs-pages-router-api-route/src/styles/Home.module.css b/examples/nextjs-pages-router/src/styles/Home.module.css
similarity index 100%
rename from examples/nextjs-pages-router-api-route/src/styles/Home.module.css
rename to examples/nextjs-pages-router/src/styles/Home.module.css
diff --git a/examples/nextjs-pages-router-custom-server/src/styles/globals.css b/examples/nextjs-pages-router/src/styles/globals.css
similarity index 100%
rename from examples/nextjs-pages-router-custom-server/src/styles/globals.css
rename to examples/nextjs-pages-router/src/styles/globals.css