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

Next.js 默认包含自己的服务器，使用 next start 启动。如果你有现有的后端，你仍然可以将其与 Next.js 一起使用（这不是自定义服务器）。自定义 Next.js 服务器允许你以编程方式启动服务器以实现自定义模式。大多数情况下，你不需要这种方法。但是，如果需要的话，它是可用的。

温馨提示：

在决定使用自定义服务器之前，请记住它应该只在 Next.js 的集成路由无法满足你的应用需求时使用。自定义服务器会移除重要的性能优化，如 自动静态优化。

使用独立输出模式时，它不会追踪自定义服务器文件。相反，此模式会输出一个单独的最小化 server.js 文件。这些不能一起使用。

查看自定义服务器的以下示例：

TypeScript
JavaScript

server.ts
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(
    `> 服务器正在 http://localhost:${port} 监听，模式为 ${
      dev ? 'development' : process.env.NODE_ENV
    }`
  )
})

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(
    `> 服务器正在 http://localhost:${port} 监听，模式为 ${
      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.js 根据需要处理请求。

禁用文件系统路由

默认情况下，Next 将在 pages 文件夹中提供每个文件，路径名与文件名匹配。如果你的项目使用自定义服务器，此行为可能导致相同的内容从多个路径提供服务，这可能会对 SEO 和用户体验造成问题。

要禁用此行为并防止基于 pages 中的文件进行路由，请打开 next.config.js 并禁用 useFileSystemPublicRoutes 配置：

next.config.js
module.exports = {
  useFileSystemPublicRoutes: false,
}

请注意，useFileSystemPublicRoutes 会禁用 SSR 的文件名路由；客户端路由仍可能访问这些路径。使用此选项时，你应该防止程序化导航到你不想要的路由。

你可能还希望配置客户端路由器以禁止客户端重定向到文件名路由；为此，请参考 router.beforePopState。

禁用文件系统路由​

禁用文件系统路由