Webpack 5 採用

このメッセージが表示された理由

Next.js はコンパイルのデフォルトとして webpack 5 を採用しました。 webpack 4 から 5 への移行をできるだけスムーズにするために、多くの努力を払ってきました。

現在、アプリケーションでは `webpack5: false` フラグを使用して webpack 5 が無効になっていますが、これは Next.js 12 で削除されました。

next.config.js

module.exports = {
  // Webpack 5 is enabled by default
  // You can still use webpack 4 while upgrading to the latest version of Next.js by adding the "webpack5: false" flag
  webpack5: false,
}

アプリケーションで webpack 5 を使用すると、多くの利点があります。特に以下が挙げられます。

ディスクキャッシュの改善: 後続のビルドで `next build` が大幅に高速化されます。
高速リフレッシュの改善: 高速リフレッシュの動作が優先されます。
アセットの長期キャッシングの改善: ビルド間で変化しにくい決定論的なコード出力が得られます。
ツリーシェイキングの改善
`new URL("file.png", import.meta.url)` を使用したアセットのサポート
`new Worker(new URL("worker.js", import.meta.url))` を使用したウェブワーカーのサポート
`package.json` の `exports`/`imports` フィールドのサポート

以前のリリースでは、webpack 5 を段階的に Next.js アプリケーションに展開してきました。

Next.js 10.2 では、`next.config.js` にカスタム webpack 設定がないアプリケーションを自動的にオプトインしました。
Next.js 10.2 では、`next.config.js` がないアプリケーションを自動的にオプトインしました。
Next.js 11 では、すべてのアプリケーションで webpack 5 がデフォルトで有効になりました。`next.config.js` で `webpack5: false` を使用してオプトアウトし、下位互換性を確保するために webpack 4 を使用することもできました。
Next.js 12 では、webpack 4 のサポートが削除されました。

カスタム webpack 設定

カスタム webpack 設定をカスタムプラグインまたは独自の修正を通じて行っている場合は、アプリケーションが webpack 5 で動作するようにいくつかの手順を実行する必要があります。

`next-transpile-modules` を使用している場合は、このパッチを含む最新バージョンを使用してください。
`@zeit/next-css` / `@zeit/next-sass` を使用している場合は、代わりに組み込みの CSS/Sass サポートを使用してください。
`@zeit/next-preact` を使用している場合は、代わりにこの例を使用してください。
`@zeit/next-source-maps` を使用している場合は、組み込みの本番環境ソースマップサポートを使用してください。
webpack プラグインを使用している場合は、最新バージョンにアップグレードしてください。ほとんどの場合、最新バージョンには webpack 5 のサポートが含まれています。場合によっては、これらのアップグレードされた webpack プラグインは webpack 5 のみをサポートします。

便利なリンク

問題が発生した場合は、このヘルプディスカッションでコミュニティとつながることができます。