output

build の間に、Next.js は各ページとその依存関係を自動的に追跡し、アプリケーションの production version をデプロイするために必要なすべてのファイルを決定します。

この機能は、size、つまりデプロイメントのサイズを大幅に削減します。以前は、Docker でデプロイする際には、dependenciesのすべてのファイルをインストールしてnext startを実行する必要がありました。しかし、Next.js12 からは、.next/ディレクトリの Output File Tracing を活用して、必要なファイルのみを含めることができます。

さらに、これにより非推奨の serverless target が必要なくなり、さまざまな問題を引き起こしたり、不必要な重複を作り出したりすることを防ぎます。

How it Works

next buildの間に、Next.js は@vercel/nft を使ってimport、require、そしてfsの使用を静的に分析し、ページが読み込み可能な全ファイルを特定します。

Next.js の production server もその必要なファイルのために追跡され、.next/next-server.js.nft.jsonで出力されます。これは production で活用できます。

.nft.jsonファイルが.next出力ディレクトリに出力されるのを利用するには、各トレースで.nft.jsonファイルに相対的なファイルのリストを読み込み、それらをあなたのデプロイメント位置にコピーすることができます。

Automatically Copying Traced Files

Next.js は、node_modules内の選択されたファイルを含む production デプロイメントのための必要なファイルのみをコピーするstandaloneフォルダを自動的に作成することができます。

この自動コピーツールを活用するために、あなたのnext.config.jsでそれを有効にすることができます：

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

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

さらに、最小限のserver.jsファイルも出力されます。これはnext startの代わりに使用することができます。この最小限の server は、通常これらは CDN によって処理されるべきであるため、publicや.next/staticフォルダを default でコピーしません。ただし、これらのフォルダはstandalone/publicおよびstandalone/.next/staticフォルダに手動でコピーすることができ、その後server.jsファイルはこれらを自動的に提供します。

Good to know:

• next.config.jsはnext buildの間に読み込まれ、server.js出力ファイルにシリアライズされます。もし、古いserverRuntimeConfigまたはpublicRuntimeConfigoptionsが使用されている場合、その値は build 時の値に固有のものとなります。
• プロジェクトが特定の port や hostname を監視する必要がある場合、server.jsを実行する前にPORTまたはHOSTNAMEといった environment variables を定義できます。例えば、http://0.0.0.0:8080上で server を start するためには、PORT=8080 HOSTNAME=0.0.0.0 node server.jsを実行します。
• あなたのプロジェクトがImage Optimizationを default のloaderで使用している場合、依存性としてsharpをインストールする必要があります:

npm i sharp

yarn add sharp

pnpm add sharp

bun add sharp

Caveats

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

module.exports = {
  experimental: {
    // this includes files from the monorepo base two directories up
    outputFileTracingRoot: path.join(__dirname, '../../'),
  },
}

• Next.js が必要なファイルを含めることができない場合や、不要なファイルを誤って含める可能性がある場合があります。そのような場合には、next.config.jsの中でそれぞれexperimental.outputFileTracingExcludesとexperimental.outputFileTracingIncludesを活用できます。各 config には、特定のページを一致させるためのキーを持つminimatch globs の object を受け入れ、トレースの中で含めるか除外するかを指定するプロジェクトの root に対する相対的な globs の配列の value を受け入れます。

module.exports = {
  experimental: {
    outputFileTracingExcludes: {
      '/api/hello': ['./un-necessary-folder/**/*'],
    },
    outputFileTracingIncludes: {
      '/api/another': ['./necessary-folder/**/*'],
    },
  },
}

• 現在、Next.js は発行された .nft.jsonファイルを操作しません。これらのファイルは、例えばVercel などのデプロイメントプラットフォームで読み込む必要があり、最小のデプロイメントを作成します。将来のリリースでは、これらの .nft.json ファイルを利用する新しいコマンドが計画されています。

Experimental 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 `experimental.outputFileTracingRoot` has the same effect
      // if the `experimental.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
    },
  },
}