Custom Webpack Config

Good to know: 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:

• CSS imports
• CSS modules
• Sass/SCSS imports
• Sass/SCSS modules

Some commonly asked for features are available as plugins:

• @next/mdx
• @next/bundle-analyzer

In order to extend our usage ofwebpack, you can define a function that extends its config insidenext.config.js, like so:

module.exports= {webpack: (    config,    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }  )=> {// Important: return the modified configreturn config  },}

Thewebpack function is executed three times, twice for the server (nodejs / edge runtime) and once for the client. This allows you to distinguish between client and server configuration using theisServer property.

The second argument to thewebpack function is an object with the following properties:

• buildId:String - The build id, used as a unique identifier between builds.
• dev:Boolean - Indicates if the compilation will be done in development.
• isServer:Boolean - It'strue for server-side compilation, andfalse for client-side compilation.
• nextRuntime:String | undefined - The target runtime for server-side compilation; either"edge" or"nodejs", it'sundefined for client-side compilation.
• defaultLoaders:Object - Default loaders used internally by Next.js:
  • babel:Object - Defaultbabel-loader configuration.

Example usage ofdefaultLoaders.babel:

// Example config for adding a loader that depends on babel-loader// This source was taken from the @next/mdx plugin source:// https://github.com/vercel/next.js/tree/canary/packages/next-mdxmodule.exports= {webpack: (config, options)=> {config.module.rules.push({      test: /\.mdx/,      use: [options.defaultLoaders.babel,        {          loader:'@mdx-js/loader',          options:pluginOptions.options,        },      ],    })return config  },}

nextRuntime

Notice thatisServer istrue whennextRuntime is"edge" or"nodejs",nextRuntime"edge" is currently for proxy and Server Components in edge runtime only.