Next.js 是一种流行的 React 框架，它可以让我们更快地构建 SSR 应用程序。默认情况下，Next.js 使用自己的服务器来呈现应用程序。但是，有时候可能需要添加自定义服务器，在这种情况下，我们可以通过自定义 express 服务器来满足需求。
安装 express
首先，我们需要安装 express。在命令行中，我们可以使用以下命令来安装 express：
npm install express --save
创建一个自定义 express 服务器
接下来，我们需要创建一个自定义服务器。在项目的根目录中创建一个名为 server.js 的文件，并将其添加到 package.json 的 scripts 中：
"scripts": {
"dev": "node server.js"
}在 server.js 中，我们需要引入 express 并使用它来创建一个服务器：
// javascriptcn.com code example
const express = require('express')
const server = express()
server.get('/', (req, res) => {
res.send('Hello World!')
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})现在，当我们使用 npm run dev 启动开发服务器时，将运行 server.js 中的代码。
使用 express 服务器
在我们的 Next.js 应用程序中，我们需要使用我们创建的自定义服务器。默认情况下，Next.js 是基于文件系统的路由，它可以自动为我们处理路由。但是，我们需要将路由设置为指向我们的 express 服务器，以便在以后进行处理。
我们可以通过在 server.js 中使用 next 库来处理路由。首先，我们需要将依赖项添加到我们的项目中：
npm install next --save
在 server.js 中，我们可以使用以下代码来设置路由：
// javascriptcn.com code example
const next = require('next')
const express = require('express')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const server = express()
app.prepare().then(() => {
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})现在，我们可以使用 npm run dev 启动我们的 Next.js 应用程序和 express 服务器。当我们访问我们的应用程序时，所有路由都将被处理为 express 服务器中定义的路由。
示例代码
完整的示例代码如下：
// javascriptcn.com code example
const next = require('next')
const express = require('express')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const server = express()
server.get('/', (req, res) => {
res.send('Hello World!')
})
app.prepare().then(() => {
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})结论
在本文中，我们介绍了如何在 Next.js 中使用自定义 express 服务器。通过创建自己的服务器，我们可以更灵活地处理路由和应用程序逻辑。此外，我们还提供了一个示例代码，以便您可以在开始之前尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67301593eedcc8a97c910624