Q25: How do you extend Webpack configuration inside next.config.js for the Pages Router?
Custom Webpack configurations are defined inside the webpack property in next.config.js. It receives the existing config object and options (isServer, dev, webpack) to mutate or append plugins.
Extending Webpack in next.config.js
// next.config.js
module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.fallback.fs = false; // Fixes client-side fs module resolution
}
return config;
},
};💡 Modifies resolution fallbacks to prevent bundling Node modules into client bundles.
Key Takeaways
- Extend Webpack rules using
next.config.js. - Check
options.isServerto target server vs client bundle configurations.
Knowledge Check
Which flag inside next.config.js webpack options determines if Webpack is bundling server code?