output
在构建期间,Next.js 将自动跟踪每个页面及其依赖项,以确定部署生产版本的应用程序所需的所有文件。
此功能有助于大幅减少部署的大小。 以前,当使用 Docker 部署时,你需要安装包 dependencies
中的所有文件才能运行 next start
。 从 Next.js 12 开始,你可以利用 .next/
目录中的输出文件跟踪功能,仅包含必要的文件。
此外,这消除了对已弃用的 serverless
目标的需求,该目标可能会导致各种问题,并产生不必要的重复。
工作原理
在 next build
期间,Next.js 将使用 @vercel/nft
静态分析 import
、require
和 fs
的用法,以确定页面可能加载的所有文件。
Next.js 的生产服务器也会被跟踪其所需的文件,并在 .next/next-server.js.nft.json
中输出,这可以在生产环境中使用。
要利用 .nft.json
文件输出到 .next
输出目录,你可以读取每个跟踪中相对于 .nft.json
文件的文件列表,然后将它们复制到你的部署位置。
自动复制跟踪的文件
Next.js 可以自动创建一个 standalone
文件夹,该文件夹仅复制生产部署所需的必要文件,包括 node_modules
中的选定文件。
要利用此自动复制功能,你可以在你的 next.config.js
中启用它
module.exports = {
output: 'standalone',
}
这将在 .next/standalone
中创建一个文件夹,然后可以单独部署它,而无需安装 node_modules
。
此外,还会输出一个最小的 server.js
文件,它可以代替 next start
使用。 这个最小的服务器默认情况下不复制 public
或 .next/static
文件夹,因为这些文件夹理想情况下应由 CDN 处理,尽管这些文件夹可以手动复制到 standalone/public
和 standalone/.next/static
文件夹,之后 server.js
文件将自动提供这些文件夹。
要手动复制这些文件,你可以在 next build
后使用 cp
命令行工具
cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/
要在本地启动你的最小 server.js
文件,请运行以下命令
node .next/standalone/server.js
须知:
next.config.js
在next build
期间读取并序列化到server.js
输出文件中。 如果正在使用旧版的serverRuntimeConfig
或publicRuntimeConfig
选项,则这些值将特定于构建时的值。- 如果你的项目需要监听特定的端口或主机名,你可以在运行
server.js
之前定义PORT
或HOSTNAME
环境变量。 例如,运行PORT=8080 HOSTNAME=0.0.0.0 node server.js
以在http://0.0.0.0:8080
上启动服务器。
注意事项
- 在 monorepo 设置中进行跟踪时,默认情况下项目目录用于跟踪。 对于
next build packages/web-app
,packages/web-app
将是跟踪根目录,并且不包括该文件夹之外的任何文件。 要包含此文件夹之外的文件,你可以在你的next.config.js
中设置outputFileTracingRoot
。
module.exports = {
// this includes files from the monorepo base two directories up
outputFileTracingRoot: path.join(__dirname, '../../'),
}
- 在某些情况下,Next.js 可能无法包含所需的文件,或者可能错误地包含未使用的文件。 在这些情况下,你可以分别在
next.config.js
中利用outputFileTracingExcludes
和outputFileTracingIncludes
。 每个配置都接受一个对象,其中键是 minimatch globs 以匹配特定页面,值是相对于项目根目录的 globs 数组,用于在跟踪中包含或排除。
module.exports = {
outputFileTracingExcludes: {
'/api/hello': ['./un-necessary-folder/**/*'],
},
outputFileTracingIncludes: {
'/api/another': ['./necessary-folder/**/*'],
'/api/login/\\[\\[\\.\\.\\.slug\\]\\]': [
'./node_modules/aws-crt/dist/bin/**/*',
],
},
}
注意:outputFileTracingIncludes
/outputFileTracingExcludes
的键是一个 glob,因此特殊字符需要转义。
- 目前,Next.js 不会对发出的
.nft.json
文件执行任何操作。 文件必须由你的部署平台(例如 Vercel)读取,才能创建最小部署。 在未来的版本中,计划使用一个新命令来利用这些.nft.json
文件。
实验性 turbotrace
跟踪依赖项可能很慢,因为它需要非常复杂的计算和分析。 我们在 Rust 中创建了 turbotrace
,作为 JavaScript 实现的更快、更智能的替代方案。
要启用它,你可以将以下配置添加到你的 next.config.js
module.exports = {
experimental: {
turbotrace: {
// control the log level of the turbotrace, default is `error`
logLevel?:
| 'bug'
| 'fatal'
| 'error'
| 'warning'
| 'hint'
| 'note'
| 'suggestions'
| 'info',
// control if the log of turbotrace should contain the details of the analysis, default is `false`
logDetail?: boolean
// show all log messages without limit
// turbotrace only show 1 log message for each categories by default
logAll?: boolean
// control the context directory of the turbotrace
// files outside of the context directory will not be traced
// set the `outputFileTracingRoot` has the same effect
// if the `outputFileTracingRoot` and this option are both set, the `experimental.turbotrace.contextDirectory` will be used
contextDirectory?: string
// if there is `process.cwd()` expression in your code, you can set this option to tell `turbotrace` the value of `process.cwd()` while tracing.
// for example the require(process.cwd() + '/package.json') will be traced as require('/path/to/cwd/package.json')
processCwd?: string
// control the maximum memory usage of the `turbotrace`, in `MB`, default is `6000`.
memoryLimit?: number
},
},
}
这有帮助吗?