docs: add example with Next.js (with app router)

socketio · Mar 27, 2024 · 61f4449 · 61f4449
1 parent b0568b2
commit 61f4449
Show file tree

Hide file tree

Showing 36 changed files with 74 additions and 127 deletions.
diff --git 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/.../nextjs-pages-router-api-route/.gitignore → examples/nextjs-app-router/.gitignore b/.../nextjs-pages-router-api-route/.gitignore → examples/nextjs-app-router/.gitignore
diff --git a/...xtjs-pages-router-custom-server/README.md → examples/nextjs-app-router/README.md b/...xtjs-pages-router-custom-server/README.md → 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/...xtjs-pages-router-api-route/jsconfig.json → examples/nextjs-app-router/jsconfig.json b/...xtjs-pages-router-api-route/jsconfig.json → examples/nextjs-app-router/jsconfig.json
diff --git a/...ages-router-custom-server/next.config.mjs → examples/nextjs-app-router/next.config.mjs b/...ages-router-custom-server/next.config.mjs → 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/...extjs-pages-router-api-route/package.json → examples/nextjs-app-router/package.json b/...extjs-pages-router-api-route/package.json → 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/...js-pages-router-api-route/public/next.svg → examples/nextjs-app-router/public/next.svg b/...js-pages-router-api-route/public/next.svg → examples/nextjs-app-router/public/next.svg
diff --git a/...-pages-router-api-route/public/vercel.svg → examples/nextjs-app-router/public/vercel.svg b/...-pages-router-api-route/public/vercel.svg → examples/nextjs-app-router/public/vercel.svg
diff --git a/...xtjs-pages-router-custom-server/server.js → examples/nextjs-app-router/server.js b/...xtjs-pages-router-custom-server/server.js → 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/...pages-router-api-route/public/favicon.ico → ...les/nextjs-app-router/src/app/favicon.ico b/...pages-router-api-route/public/favicon.ico → ...les/nextjs-app-router/src/app/favicon.ico
diff --git a/...s-router-api-route/src/styles/globals.css → ...les/nextjs-app-router/src/app/globals.css b/...s-router-api-route/src/styles/globals.css → ...les/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
@@ -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/...pages-router-api-route/src/pages/index.js → examples/nextjs-app-router/src/app/page.js b/...pages-router-api-route/src/pages/index.js → 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/...-custom-server/src/styles/Home.module.css → ...nextjs-app-router/src/app/page.module.css b/...-custom-server/src/styles/Home.module.css → ...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
@@ -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
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
diff --git a/examples/nextjs-pages-router-api-route/src/socket.js b/examples/nextjs-pages-router-api-route/src/socket.js
diff --git a/examples/nextjs-pages-router-custom-server/src/pages/_document.js b/examples/nextjs-pages-router-custom-server/src/pages/_document.js
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
diff --git a/...tjs-pages-router-custom-server/.gitignore → examples/nextjs-pages-router/.gitignore b/...tjs-pages-router-custom-server/.gitignore → examples/nextjs-pages-router/.gitignore
@@ -12,6 +12,7 @@
 # next.js
 /.next/
 /out/
+/src/.next/
 
 # production
 /build

diff --git a/...s/nextjs-pages-router-api-route/README.md → examples/nextjs-pages-router/README.md b/...s/nextjs-pages-router-api-route/README.md → examples/nextjs-pages-router/README.md
diff --git a/...-pages-router-custom-server/jsconfig.json → examples/nextjs-pages-router/jsconfig.json b/...-pages-router-custom-server/jsconfig.json → examples/nextjs-pages-router/jsconfig.json
diff --git a/...js-pages-router-api-route/next.config.mjs → examples/nextjs-pages-router/next.config.mjs b/...js-pages-router-api-route/next.config.mjs → examples/nextjs-pages-router/next.config.mjs
diff --git a/...s-pages-router-custom-server/package.json → examples/nextjs-pages-router/package.json b/...s-pages-router-custom-server/package.json → 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/...s-router-custom-server/public/favicon.ico → ...es/nextjs-pages-router/public/favicon.ico b/...s-router-custom-server/public/favicon.ico → ...es/nextjs-pages-router/public/favicon.ico
diff --git a/...ages-router-custom-server/public/next.svg → examples/nextjs-pages-router/public/next.svg b/...ages-router-custom-server/public/next.svg → examples/nextjs-pages-router/public/next.svg
diff --git a/...es-router-custom-server/public/vercel.svg → ...les/nextjs-pages-router/public/vercel.svg b/...es-router-custom-server/public/vercel.svg → ...les/nextjs-pages-router/public/vercel.svg
diff --git a/examples/nextjs-pages-router/server.js 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/...es-router-custom-server/src/pages/_app.js → ...les/nextjs-pages-router/src/pages/_app.js b/...es-router-custom-server/src/pages/_app.js → ...les/nextjs-pages-router/src/pages/_app.js
diff --git a/...s-router-api-route/src/pages/_document.js → ...extjs-pages-router/src/pages/_document.js b/...s-router-api-route/src/pages/_document.js → ...extjs-pages-router/src/pages/_document.js
diff --git a/...s-router-api-route/src/pages/api/hello.js → ...extjs-pages-router/src/pages/api/hello.js b/...s-router-api-route/src/pages/api/hello.js → ...extjs-pages-router/src/pages/api/hello.js
diff --git a/...s-router-custom-server/src/pages/index.js → ...es/nextjs-pages-router/src/pages/index.js b/...s-router-custom-server/src/pages/index.js → ...es/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/...-pages-router-custom-server/src/socket.js → examples/nextjs-pages-router/src/socket.js b/...-pages-router-custom-server/src/socket.js → examples/nextjs-pages-router/src/socket.js
diff --git a/...uter-api-route/src/styles/Home.module.css → ...s-pages-router/src/styles/Home.module.css b/...uter-api-route/src/styles/Home.module.css → ...s-pages-router/src/styles/Home.module.css
diff --git a/...uter-custom-server/src/styles/globals.css → ...extjs-pages-router/src/styles/globals.css b/...uter-custom-server/src/styles/globals.css → ...extjs-pages-router/src/styles/globals.css