自定义服务器
默认情况下,Next.js 通过 next start
自带服务器。如果您已有后端服务,仍可将其与 Next.js 配合使用(这不属于自定义服务器)。自定义 Next.js 服务器允许您 100% 通过编程方式启动服务器,以实现自定义服务器模式。大多数情况下您并不需要此功能——但它为完全定制提供了可能。
须知:
- 在决定使用自定义服务器前,请注意仅当 Next.js 内置路由无法满足应用需求时才应使用。自定义服务器将移除重要性能优化,如 无服务器函数 (serverless functions) 和 自动静态优化 (Automatic Static Optimization)。
- 自定义服务器无法部署至 Vercel。
- 独立输出模式不会追踪自定义服务器文件,该模式会输出一个独立的最小化
server.js
文件。
参考以下自定义服务器示例:
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// 使用中间件时必须提供 `hostname` 和 `port`
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer(async (req, res) => {
try {
// 确保向 `url.parse` 传入第二个参数 `true`
// 这会解析 URL 的查询部分
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
if (pathname === '/a') {
await app.render(req, res, '/a', query)
} else if (pathname === '/b') {
await app.render(req, res, '/b', query)
} else {
await handle(req, res, parsedUrl)
}
} catch (err) {
console.error('处理请求时出错', req.url, err)
res.statusCode = 500
res.end('服务器内部错误')
}
})
.once('error', (err) => {
console.error(err)
process.exit(1)
})
.listen(port, () => {
console.log(`> 服务已就绪 http://${hostname}:${port}`)
})
})
server.js
不会经过 babel 或 webpack 处理。请确保该文件的语法和引用的模块与当前运行的 Node.js 版本兼容。
要运行自定义服务器,需按如下方式更新 package.json
中的 scripts
:
{
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
}
}
自定义服务器通过以下导入方式将服务器与 Next.js 应用连接:
const next = require('next')
const app = next({})
上述 next
导入是一个接收配置对象的函数,支持以下选项:
选项 | 类型 | 描述 |
---|---|---|
conf | Object | 与 next.config.js 相同的配置对象。默认为 {} |
customServer | Boolean | (可选)当服务器由 Next.js 创建时设为 false |
dev | Boolean | (可选)是否以开发模式启动 Next.js。默认为 false |
dir | String | (可选)Next.js 项目路径。默认为 '.' |
quiet | Boolean | (可选)隐藏包含服务器信息的错误消息。默认为 false |
hostname | String | (可选)服务器运行的主机名 |
port | Number | (可选)服务器运行的端口号 |
httpServer | node:http#Server | (可选)Next.js 运行的底层 HTTP 服务器 |
返回的 app
对象可用于按需让 Next.js 处理请求。
禁用文件系统路由
默认情况下,Next
会将 pages
文件夹中的每个文件映射到对应的路径名提供访问。如果项目使用自定义服务器,此行为可能导致相同内容从多个路径提供服务,可能引发 SEO 和用户体验问题。
要禁用此行为并阻止基于 pages
文件的路由,请在 next.config.js
中禁用 useFileSystemPublicRoutes
配置:
module.exports = {
useFileSystemPublicRoutes: false,
}
注意
useFileSystemPublicRoutes
仅禁用 SSR 的文件名路由;客户端路由仍可访问这些路径。使用此选项时,应通过编程方式阻止导航到不需要的路由。
您可能还需要配置客户端路由以禁止重定向到文件名路由,具体可参考
router.beforePopState
。