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は自動的に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で起動します。

注意点

• モノリポ設定でトレースする場合、デフォルトでプロジェクトディレクトリがトレースに使用されます。next build packages/web-appの場合、packages/web-appがトレースのルートとなり、そのフォルダ外のファイルは含まれません。このフォルダ外のファイルを含めるには、next.config.jsでoutputFileTracingRootを設定できます。

module.exports = {
  // これにより、モノリポベースの2階層上のファイルが含まれます
  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のキーはglobであるため、特殊文字をエスケープする必要があります。

• 現在、Next.jsは出力された.nft.jsonファイルに対して何も行いません。これらのファイルは、Vercelなどの展開プラットフォームによって読み取られ、最小限の展開を作成する必要があります。将来のリリースでは、これらの.nft.jsonファイルを利用する新しいコマンドが計画されています。

実験的なturbotrace

依存関係のトレースは、非常に複雑な計算と分析を必要とするため、遅くなる可能性があります。私たちは、JavaScriptの実装に代わる、より高速でスマートなturbotraceをRustで作成しました。

有効にするには、next.config.jsに次の設定を追加できます：

module.exports = {
  experimental: {
    turbotrace: {
      // turbotrace のログレベルを制御します。デフォルトは `error`
      logLevel?:
      | 'bug'
      | 'fatal'
      | 'error'
      | 'warning'
      | 'hint'
      | 'note'
      | 'suggestions'
      | 'info',
      // turbotrace のログに分析の詳細を含めるかを制御します。デフォルトは `false`
      logDetail?: boolean
      // 制限なしですべてのログメッセージを表示します
      // turbotrace はデフォルトで各カテゴリごとに1つのログメッセージのみを表示します
      logAll?: boolean
      // turbotrace のコンテキストディレクトリを制御します
      // コンテキストディレクトリ外のファイルはトレースされません
      // `outputFileTracingRoot`を設定することと同じ効果があります
      // `outputFileTracingRoot`とこのオプションの両方が設定されている場合、`experimental.turbotrace.contextDirectory`が使用されます
      contextDirectory?: string
      // コード内に `process.cwd()` 式がある場合、トレース中の `process.cwd()` の値をこのオプションで設定できます
      // 例えば、require(process.cwd() + '/package.json') は require('/path/to/cwd/package.json') としてトレースされます
      processCwd?: string
      // `turbotrace` の最大メモリ使用量を制御します。`MB`単位で、デフォルトは `6000` です
      memoryLimit?: number
    },
  },
}