Webpack 5 の採用

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

Next.js は、コンパイルのデフォルトとして webpack 5 を採用しました。webpack 4 から 5 への移行が可能な限りスムーズに行われるよう、多大な努力を重ねてきました。

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

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 が以降のビルドで大幅に高速化されます
Fast Refresh の改善: Fast Refresh の処理が優先されます
アセットの長期キャッシュの改善: ビルド間で変更されにくい決定論的なコード出力
ツリーシェイキングの改善
new URL("file.png", import.meta.url) を使用したアセットのサポート
new Worker(new URL("worker.js", import.meta.url)) を使用した Web Worker のサポート
package.json の exports/imports フィールドのサポート

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

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 のみをサポートします。

役立つリンク

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