mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
89 lines
3.5 KiB
Plaintext
89 lines
3.5 KiB
Plaintext
---
|
|
title: Custom Webpack Config
|
|
nav_title: webpack
|
|
description: Learn how to customize the webpack config used by Next.js
|
|
---
|
|
|
|
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
|
|
|
|
> **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:
|
|
|
|
<AppOnly>
|
|
|
|
- [CSS imports](/docs/app/building-your-application/styling)
|
|
- [CSS modules](/docs/app/building-your-application/styling/css-modules)
|
|
- [Sass/SCSS imports](/docs/app/building-your-application/styling/sass)
|
|
- [Sass/SCSS modules](/docs/app/building-your-application/styling/sass)
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
- [CSS imports](/docs/pages/building-your-application/styling)
|
|
- [CSS modules](/docs/pages/building-your-application/styling/css-modules)
|
|
- [Sass/SCSS imports](/docs/pages/building-your-application/styling/sass)
|
|
- [Sass/SCSS modules](/docs/pages/building-your-application/styling/sass)
|
|
- [Customizing babel configuration](/docs/pages/building-your-application/configuring/babel)
|
|
|
|
</PagesOnly>
|
|
|
|
Some commonly asked for features are available as plugins:
|
|
|
|
- [@next/mdx](https://github.com/vercel/next.js/tree/canary/packages/next-mdx)
|
|
- [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer)
|
|
|
|
In order to extend our usage of `webpack`, you can define a function that extends its config inside `next.config.js`, like so:
|
|
|
|
```js filename="next.config.js"
|
|
module.exports = {
|
|
webpack: (
|
|
config,
|
|
{ buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
|
|
) => {
|
|
// Important: return the modified config
|
|
return config
|
|
},
|
|
}
|
|
```
|
|
|
|
> The `webpack` 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 the `isServer` property.
|
|
|
|
The second argument to the `webpack` 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's `true` for server-side compilation, and `false` for client-side compilation
|
|
- `nextRuntime`: `String | undefined` - The target runtime for server-side compilation; either `"edge"` or `"nodejs"`, it's `undefined` for client-side compilation.
|
|
- `defaultLoaders`: `Object` - Default loaders used internally by Next.js:
|
|
- `babel`: `Object` - Default `babel-loader` configuration
|
|
|
|
Example usage of `defaultLoaders.babel`:
|
|
|
|
```js
|
|
// 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-mdx
|
|
module.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 that `isServer` is `true` when `nextRuntime` is `"edge"` or `"nodejs"`, nextRuntime "`edge`" is currently for middleware and Server Components in edge runtime only.
|