Menu

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で有効にします：

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

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

実験的なturbotrace

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

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

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