自定义服务器
默认情况下,Next.js 自带服务器,使用 next start
启动。如果您已经有后端,您仍然可以将其与 Next.js 一起使用(这不是自定义服务器)。自定义 Next.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 中使用的相同对象。默认为 {} |
customServer | 布尔值 | (可选)服务器由 Next.js 创建时设置为 false |
dev | 布尔值 | (可选)是否以开发模式启动 Next.js。默认为 false |
dir | 字符串 | (可选)Next.js 项目的位置。默认为 '.' |
quiet | 布尔值 | (可选)隐藏包含服务器信息的错误消息。默认为 false |
hostname | 字符串 | (可选)服务器运行其后的主机名 |
port | 数字 | (可选)服务器运行其后的端口 |
httpServer | node: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
会禁用来自服务器端渲染的文件名路由;客户端路由仍然可以访问这些路径。使用此选项时,您应该防止对您不希望以编程方式导航到的路由进行导航。
您可能还希望配置客户端路由器以禁止客户端重定向到文件名路由;为此,请参阅
router.beforePopState
。
这对您有帮助吗?