output

ビルド中、Next.js は各ページとその依存関係を自動的にトレースし、アプリケーションの本番バージョンをデプロイするために必要なすべてのファイルを特定します。

この機能により、デプロイのサイズを大幅に削減できます。以前は、Docker でデプロイする際に `next start` を実行するために、パッケージの `dependencies` からすべてのファイルをインストールする必要がありました。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 は、`node_modules` 内の選択されたファイルを含め、本番デプロイに必要なファイルのみをコピーする `standalone` フォルダーを自動的に作成できます。

この自動コピーを活用するには、`next.config.js` で有効にすることができます。

module.exports = {
  output: 'standalone',
}

これにより、`.next/standalone` にフォルダーが作成され、`node_modules` をインストールすることなく単独でデプロイできます。

さらに、`next start` の代わりに使える最小限の `server.js` ファイルも出力されます。この最小限のサーバーは、`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` で起動します。

注意点

• モノレポのセットアップでトレースを行う際、プロジェクトディレクトリがデフォルトでトレースのルートとして使用されます。`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 グロブ と、プロジェクトのルートからの相対パスでトレースに含めるまたは除外するグロブの配列値を、オブジェクトとして受け取ります。

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`

依存関係のトレースは、非常に複雑な計算と分析を必要とするため、時間がかかる場合があります。JavaScript実装のより高速でスマートな代替として、Rustで `turbotrace` を作成しました。

これを有効にするには、`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
    },
  },
}