diff --git a/examples/custom-server-express/README.md b/examples/custom-server-express/README.md index c52cad2127c1..2561d25de953 100644 --- a/examples/custom-server-express/README.md +++ b/examples/custom-server-express/README.md @@ -2,8 +2,12 @@ Most of the time the default Next.js server will be enough but there are times you'll want to run your own server to integrate into an existing application. Next.js provides [a custom server api](https://nextjs.org/docs/advanced-features/custom-server). +The example shows a server that serves the component living in `pages/a.ts` when the route `/b` is requested and `pages/b.ts` when the route `/a` is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside `server.ts`. + Because the Next.js server is a Node.js module you can combine it with any other part of the Node.js ecosystem. In this case we are using express. +The example shows how you can use [TypeScript](https://typescriptlang.com) on both the server and the client while using [Nodemon](https://nodemon.io/) to live reload the server code without affecting the Next.js universal code. + ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/custom-server-express?runScript=dev) diff --git a/examples/custom-server-express/nodemon.json b/examples/custom-server-express/nodemon.json new file mode 100644 index 000000000000..2ec83dadaad7 --- /dev/null +++ b/examples/custom-server-express/nodemon.json @@ -0,0 +1,5 @@ +{ + "watch": ["server.ts"], + "exec": "ts-node --project tsconfig.server.json server.ts", + "ext": "js ts" +} diff --git a/examples/custom-server-express/package.json b/examples/custom-server-express/package.json index 2df3a736c1d8..9b656b2c8cae 100644 --- a/examples/custom-server-express/package.json +++ b/examples/custom-server-express/package.json @@ -1,15 +1,24 @@ { "private": true, "scripts": { - "dev": "node server.js", - "build": "next build", - "start": "cross-env NODE_ENV=production node server.js" + "dev": "nodemon", + "build": "next build && tsc --project tsconfig.server.json", + "start": "cross-env NODE_ENV=production node dist/server.js" }, "dependencies": { - "cross-env": "^7.0.2", - "express": "^4.17.1", + "cross-env": "^7.0.3", + "express": "^4.18.2", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/express": "^4.17.14", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "nodemon": "^2.0.20", + "ts-node": "^10.9.1", + "typescript": "^4.8.4" } } diff --git a/examples/custom-server-express/pages/a.js b/examples/custom-server-express/pages/a.tsx similarity index 100% rename from examples/custom-server-express/pages/a.js rename to examples/custom-server-express/pages/a.tsx diff --git a/examples/custom-server-express/pages/b.js b/examples/custom-server-express/pages/b.tsx similarity index 100% rename from examples/custom-server-express/pages/b.js rename to examples/custom-server-express/pages/b.tsx diff --git a/examples/custom-server-express/pages/index.js b/examples/custom-server-express/pages/index.tsx similarity index 100% rename from examples/custom-server-express/pages/index.js rename to examples/custom-server-express/pages/index.tsx diff --git a/examples/custom-server-express/server.js b/examples/custom-server-express/server.ts similarity index 58% rename from examples/custom-server-express/server.js rename to examples/custom-server-express/server.ts index 2e6bc022d993..dc312ef8a670 100644 --- a/examples/custom-server-express/server.js +++ b/examples/custom-server-express/server.ts @@ -1,7 +1,8 @@ -const express = require('express') -const next = require('next') +import type { Request, Response } from 'express' +import express from 'express' +import next from 'next' -const port = parseInt(process.env.PORT, 10) || 3000 +const port = parseInt(process.env.PORT || '3000', 10) const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler() @@ -9,7 +10,7 @@ const handle = app.getRequestHandler() app.prepare().then(() => { const server = express() - server.all('*', (req, res) => { + server.all('*', (req: Request, res: Response) => { return handle(req, res) }) diff --git a/examples/custom-server-express/tsconfig.json b/examples/custom-server-express/tsconfig.json new file mode 100644 index 000000000000..99710e857874 --- /dev/null +++ b/examples/custom-server-express/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/examples/custom-server-express/tsconfig.server.json b/examples/custom-server-express/tsconfig.server.json new file mode 100644 index 000000000000..9902cccc4b4c --- /dev/null +++ b/examples/custom-server-express/tsconfig.server.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "commonjs", + "outDir": "dist", + "lib": ["es2019"], + "target": "es2019", + "isolatedModules": false, + "noEmit": false + }, + "include": ["server.ts"] +}