Note: changes to webpack config are not covered by semver so proceed at your own risk
Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case:
Some commonly asked for features are available as plugins:
In order to extend our usage of
webpack, you can define a function that extends its config inside
next.config.js, like so:
webpackfunction is executed twice, once for the server and once for the client. This allows you to distinguish between client and server configuration using the
The second argument to the
webpack function is an object with the following properties:
String- The build id, used as a unique identifier between builds
Boolean- Indicates if the compilation will be done in development
truefor server-side compilation, and
falsefor client-side compilation
String | undefined- The target runtime for server-side compilation; either
undefinedfor client-side compilation.
Object- Default loaders used internally by Next.js:
Example usage of
"nodejs", nextRuntime "
edge" is currently for middleware and server components in edge runtime only.