跳到内容
构建你的应用配置自定义服务器

自定义服务器

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 https://127.0.0.1:${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对象与你在 next.config.js 中使用的对象相同。 默认为 {}
dev布尔值可选)是否在开发模式下启动 Next.js。 默认为 false
dir字符串可选)Next.js 项目的位置。 默认为 '.'
quiet布尔值可选)隐藏包含服务器信息的错误消息。 默认为 false
hostname字符串可选)服务器在其后运行的主机名
port数字可选)服务器在其后运行的端口
httpServernode:http#Server可选)Next.js 在其后运行的 HTTP 服务器
turbo布尔值可选)启用 Turbopack

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

禁用文件系统路由

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

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

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

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

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