跳至内容

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` 中输出,这可以在生产环境中使用。

要利用发出到 `.next` 输出目录的 `.nft.json` 文件,您可以读取每个跟踪中相对于 `.nft.json` 文件的文件列表,然后将它们复制到您的部署位置。

自动复制跟踪文件

Next.js 可以自动创建一个 `standalone` 文件夹,该文件夹仅复制生产部署所需的文件,包括 `node_modules` 中的选定文件。

要利用此自动复制功能,您可以在 `next.config.js` 中启用它

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` 文件将自动为其提供服务。

需知:

  • 如果您的项目需要侦听特定端口或主机名,则可以在运行 `server.js` 之前定义 `PORT` 或 `HOSTNAME` 环境变量。例如,运行 `PORT=8080 HOSTNAME=0.0.0.0 node server.js` 以在 `http://0.0.0.0:8080` 上启动服务器。

注意事项

  • 在单仓设置中进行跟踪时,默认情况下会使用项目目录进行跟踪。对于 `next build packages/web-app`,`packages/web-app` 将是跟踪根目录,该文件夹之外的任何文件都将不包括在内。要包含此文件夹之外的文件,可以在 `next.config.js` 中设置 `outputFileTracingRoot`。
packages/web-app/next.config.js
module.exports = {
  // this includes files from the monorepo base two directories up
  outputFileTracingRoot: path.join(__dirname, '../../'),
}
  • 在某些情况下,Next.js 可能会无法包含所需的文件,或者可能错误地包含未使用的文件。在这些情况下,您可以分别在 `next.config.js` 中利用 `outputFileTracingExcludes` 和 `outputFileTracingIncludes`。每个配置都接受一个对象,其中包含 minimatch 通配符 作为键以匹配特定页面,以及一个包含相对于项目根目录的通配符的数组作为值,以便在跟踪中包含或排除。
next.config.js
module.exports = {
  outputFileTracingExcludes: {
    '/api/hello': ['./un-necessary-folder/**/*'],
  },
  outputFileTracingIncludes: {
    '/api/another': ['./necessary-folder/**/*'],
    '/api/login/\\[\\[\\.\\.\\.slug\\]\\]': [
      './node_modules/aws-crt/dist/bin/**/*',
    ],
  },
}

注意:`outputFileTracingIncludes` / `outputFileTracingExcludes` 的键是 通配符,因此需要转义特殊字符。

  • 目前,Next.js 不会对生成的 .nft.json 文件进行任何操作。这些文件必须由您的部署平台(例如 Vercel)读取,以创建最小部署。在未来的版本中,计划添加一个新命令来利用这些 .nft.json 文件。

实验性的 turbotrace

跟踪依赖项可能很慢,因为它需要非常复杂的计算和分析。我们使用 Rust 创建了 turbotrace,作为 JavaScript 实现的更快、更智能的替代方案。

要启用它,您可以在 next.config.js 中添加以下配置

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
    },
  },
}