Webpack 5 への移行

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

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

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

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 の作業が優先されます。
アセットの長期キャッシュの改善: ビルド間で変更される可能性が低い、決定論的なコード出力。
Tree Shaking の改善
new URL("file.png", import.meta.url) を使用するアセットのサポート
new Worker(new URL("worker.js", import.meta.url)) を使用した Web Worker のサポート
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 のみをサポートします。

便利なリンク

問題が発生した場合は、こちらのヘルプディスカッションでコミュニティにご参加ください。