Next.js has adopted webpack 5 as the default for compilation. We've spent a lot of effort into ensuring the transition from webpack 4 to 5 will be as smooth as possible.
Your application currently has webpack 5 disabled using the webpack5: false
flag which has been removed in 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,
}
Using webpack 5 in your application has many benefits, notably:
next build
is significantly faster on subsequent buildsnew URL("file.png", import.meta.url)
new Worker(new URL("worker.js", import.meta.url))
exports
/imports
field in package.json
In the past releases we have gradually rolled out webpack 5 to Next.js applications:
next.config.js
next.config.js
webpack5: false
in next.config.js
In case you do have custom webpack configuration, either through custom plugins or your own modifications you'll have to take a few steps to ensure your applications works with webpack 5.
next-transpile-modules
make sure you use the latest version which includes this patch@zeit/next-css
/ @zeit/next-sass
make sure you use the built-in CSS/Sass support instead@zeit/next-preact
use this example instead@zeit/next-source-maps
use the built-in production Source Map supportIn case you're running into issues you can connect with the community in this help discussion.