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` をインストールせずにそれ自体でデプロイできます。
さらに、最小限の `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
ご存知でしたか?:
- プロジェクトが特定のポートまたはホスト名でリッスンする必要がある場合、`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 glob、値をプロジェクトのルートからの相対パスでトレースに含める、または除外するグロブの配列を受け入れます。
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 実装のより高速でスマートな代替として、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
},
},
}
これは役に立ちましたか?