まず、Next.js 12以降では、デフォルトでWebpack 5が有効になっています。以前のバージョンでは、next.config.js内でwebpack5: falseフラグを使用することでWebpack 4を利用することもできましたが、Next.js 12ではこのフラグが削除されました。
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構成を持っている場合、特にカスタムプラグインや独自の修正を行っている場合は、以下の手順を実行する必要があります。
- next-transpile-modulesを使用している場合、最新バージョンを使用することを確認してください。
- @zeit/next-cssや@zeit/next-sassを使用している場合は、組み込みのCSS/Sassサポートを使用してください。
- @zeit/next-preactを使用している場合は、提供されている例を使用してください。
- @zeit/next-source-mapsを使用している場合は、組み込みの本番用ソースマップサポートを使用してください。
- webpackプラグインを使用している場合は、最新バージョンにアップグレードしてください。ほとんどの場合、最新バージョンにはWebpack 5のサポートが含まれていますが、一部のプラグインではWebpack 5のサポートが追加された最新バージョンのみが利用可能な場合もあります。
以上が、Next.jsにおけるWebpack 5の利用方法とそのメリットについての解説です。Webpack 5の導入により、ビルドパフォーマンスやキャッシングの改善、Tree Shakingなどの恩恵を受けることができます。カスタムなWebpack構成を持っている場合は、適切なアップグレード手順を確認してください。