如何在 Next.js 中设置自定义服务器

Next.js 默认通过 next start 自带服务器。如果您已有后端服务，仍可将其与 Next.js 配合使用（这不属于自定义服务器）。自定义 Next.js 服务器允许您以编程方式启动服务器以实现自定义模式。大多数情况下您无需此方案，但在需要解耦时仍可使用。

须知:

在决定使用自定义服务器前，请注意仅当 Next.js 内置路由无法满足需求时才需采用此方案。自定义服务器将移除重要性能优化，例如 自动静态优化 (Automatic Static Optimization)。

使用独立输出模式时，不会追踪自定义服务器文件。该模式会输出一个独立的最小化 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
    }`
  )
})

server.js 不会经过 Next.js 编译器或打包流程。请确保该文件所需的语法和源代码与您当前使用的 Node.js 版本兼容。查看示例。

要运行自定义服务器，需按如下方式更新 package.json 中的 scripts：

package.json

{
  "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 服务器实例
`turbo`	`Boolean`	（可选）启用 Turbopack

返回的 app 对象可用于按需处理请求。

禁用文件系统路由

默认情况下，Next 会将 pages 文件夹中的每个文件映射到与文件名匹配的路径。如果项目使用自定义服务器，此行为可能导致相同内容从多个路径访问，影响 SEO 和用户体验。

要禁用此行为并阻止基于 pages 文件的路由，请在 next.config.js 中关闭 useFileSystemPublicRoutes 配置：

next.config.js

module.exports = {
  useFileSystemPublicRoutes: false,
}

注意：useFileSystemPublicRoutes 仅禁用 SSR 的文件路径路由；客户端路由仍可访问这些路径。使用此选项时，应通过编程方式阻止导航到非目标路由。

您可能还需要配置客户端路由以禁止重定向到文件路径，相关方法请参阅 router.beforePopState。

如何在 Next.js 中设置自定义服务器

禁用文件系统路由

On this page