Menu

Custom Server

Next.js 默认通过 next start 提供了自己的服务器。如果你已经有了后端服务,你仍然可以将其与 Next.js 一起使用 (这并不是自定义服务器)。自定义 Next.js 服务器允许你通过编程方式启动服务器来实现自定义模式。大多数情况下,你不需要这种方法。但如果你确实需要,这个选项是可用的。

值得注意的是

  • 在决定使用自定义服务器之前,请记住只有当 Next.js 的集成路由器无法满足你的应用需求时才应使用它。自定义服务器会移除重要的性能优化,比如**自动静态优化**。
  • 自定义服务器无法Vercel 上部署。
  • 当使用独立输出模式时,它不会追踪自定义服务器文件。这种模式会输出一个单独的最小化 server.js 文件。这两者不能一起使用。

请看下面的自定义服务器示例

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(
    `> Server listening at http://localhost:${port} as ${
      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(
    `> 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 导入是一个函数,它接收一个包含以下选项的对象:

选项类型描述
confObjectnext.config.js 中使用的对象相同。默认为 {}
customServerBoolean(可选) 当服务器由 Next.js 创建时设置为 false
devBoolean(可选) 是否以开发模式启动 Next.js。默认为 false
dirString(可选) Next.js 项目的位置。默认为 '.'
quietBoolean(可选) 隐藏包含服务器信息的错误消息。默认为 false
hostnameString(可选) 服务器运行的主机名
portNumber(可选) 服务器运行的端口
httpServernode:http#Server(可选) Next.js 运行所在的 HTTP 服务器
turboBoolean(可选) 启用 Turbopack

返回的 app 可以用于让 Next.js 根据需要处理请求。

禁用文件系统路由

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

要禁用这种行为并防止基于 pages 中文件的路由,打开 next.config.js 并禁用 useFileSystemPublicRoutes 配置:

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

注意,useFileSystemPublicRoutes 仅禁用 SSR 中的文件名路由;客户端路由仍可能访问这些路径。使用此选项时,你应该以编程方式防止导航到你不想要的路由。

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