Jul 1, 2023
Using Webpack in a Modern Next.js App
nextjswebpackturbopackbundle-analyzerfrontend-build
Next.js now supports both Turbopack and Webpack. This post explains how Webpack still fits into a modern Next.js project, how to configure it via next.config.js, and when you actually need custom Webpack setup.
1Explains how Webpack is used alongside Turbopack in current Next.js versions.
2Shows how to customize Webpack through the webpack() function in next.config.js.
3Covers common patterns like aliases, SVG loaders, and conditional plugins.
4Describes how to run bundle analysis with @next/bundle-analyzer and next build --webpack.
5Provides guidance on when to avoid Webpack customization and rely on Next.js features instead.