Next.js 默认包含其自己的服务器,通过 next start 启动。如果你已有后端,仍可将其与 Next.js 配合使用(这不是自定义服务器)。自定义 Next.js 服务器允许你为自定义模式以编程方式启动服务器。大多数情况下,你不需要这种方法。但是,如果你需要脱离默认配置,它仍然可用。
重要提示:
- 在决定使用自定义服务器之前,请记住,它只应在 Next.js 的集成路由器无法满足你的应用程序需求时使用。自定义服务器会移除重要的性能优化,例如 自动静态优化。
- 使用独立输出模式时,它不会跟踪自定义服务器文件。相反,此模式会输出一个单独的、最小化的
server.js文件。这两者不能一起使用。
查看自定义服务器的以下示例:
import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'
const port = parseInt(process.env.PORT || '3000', 10)
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url!, true)
handle(req, res, parsedUrl)
}).listen(port)
console.log(
`> Server listening at http://localhost:${port} as ${
dev ? 'development' : process.env.NODE_ENV
}`
)
})import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'
const port = parseInt(process.env.PORT || '3000', 10)
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
}).listen(port)
console.log(
`> Server listening at http://localhost:${port} as ${
dev ? 'development' : process.env.NODE_ENV
}`
)
})
server.js不会经过 Next.js 编译器或打包过程。请确保此文件所需的语法和源代码与你当前使用的 Node.js 版本兼容。查看示例。
要运行自定义服务器,你需要像这样更新 package.json 中的 scripts:
{
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
}另外,你也可以设置 nodemon (示例)。自定义服务器使用以下导入来连接服务器与 Next.js 应用程序:
import next from 'next'
const app = next({})上述 next 导入是一个函数,它接收一个包含以下选项的对象:
| 选项 | 类型 | 描述 |
|---|---|---|
conf | Object | 你会在 next.config.js 中使用的相同对象。默认为 {} |
dev | Boolean | (可选) 是否以开发模式启动 Next.js。默认为 false |
dir | String | (可选) Next.js 项目的位置。默认为 '.' |
quiet | Boolean | (可选) 隐藏包含服务器信息的错误消息。默认为 false |
hostname | String | (可选) 服务器运行所在的主机名 |
port | Number | (可选) 服务器运行所在的端口 |
httpServer | node:http#Server | (可选) Next.js 运行所使用的 HTTP 服务器 |
turbopack | Boolean | (可选) 启用 Turbopack(默认启用) |
webpack | Boolean | (可选) 启用 webpack |
返回的 app 即可用于让 Next.js 处理所需请求。
默认情况下,Next 会将 pages 文件夹中的每个文件作为路径名与文件名匹配的路由进行服务。如果你的项目使用自定义服务器,这种行为可能导致相同内容从多个路径提供,从而可能带来 SEO 和用户体验方面的问题。
要禁用此行为并防止基于 pages 中文件的路由,请打开 next.config.js 并禁用 useFileSystemPublicRoutes 配置:
module.exports = {
useFileSystemPublicRoutes: false,
}请注意,
useFileSystemPublicRoutes会禁用 SSR 中的文件名路由;但客户端路由可能仍能访问这些路径。使用此选项时,你应该通过编程方式阻止导航到你不想访问的路由。
你可能还希望配置客户端路由器以禁止客户端重定向到文件名路由;为此,请参考
router.beforePopState。