webpack

需要了解：semver 不涵盖对 webpack 配置的更改，因此请自行承担风险

¥Good to know: changes to webpack config are not covered by semver so proceed at your own risk

在继续将自定义 webpack 配置添加到你的应用之前，请确保 Next.js 尚不支持你的用例：

¥Before continuing to add custom webpack configuration to your application make sure Next.js doesn't already support your use-case:

• CSS 导入

  ¥CSS imports

• CSS 模块

  ¥CSS modules

• Sass/SCSS 导入

  ¥Sass/SCSS imports

• Sass/SCSS 模块

  ¥Sass/SCSS modules

• 自定义 babel 配置

  ¥Customizing babel configuration

一些常见的功能可以作为插件提供：

¥Some commonly asked for features are available as plugins:

• @next/mdx

• @next/bundle-analyzer

为了扩展 webpack 的使用，你可以定义一个在 next.config.js 内部扩展其配置的函数，如下所示：

¥In order to extend our usage of webpack, you can define a function that extends its config inside next.config.js, like so:

webpack 函数执行了 3 次，两次为服务器（nodejs/edge 运行时）执行一次，一次为客户端执行。这允许你使用 isServer 属性区分客户端和服务器配置。

¥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.

webpack 函数的第二个参数是具有以下属性的对象：

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

• buildId：String - 构建 ID，用作构建之间的唯一标识符。

  ¥buildId: String - The build id, used as a unique identifier between builds.

• dev：Boolean - 指示是否将在开发中完成编译。

  ¥dev: Boolean - Indicates if the compilation will be done in development.

• isServer：Boolean - 它是用于服务器端编译的 true，用于客户端编译的 false。

  ¥isServer: Boolean - It's true for server-side compilation, and false for client-side compilation.

• nextRuntime：String | undefined - 服务器端编译的目标运行时；无论是 "edge" 还是 "nodejs"，客户端编译都是 undefined。

  ¥nextRuntime: String | undefined - The target runtime for server-side compilation; either "edge" or "nodejs", it's undefined for client-side compilation.

• defaultLoaders：Object - Next.js 内部使用的默认加载器：

  ¥defaultLoaders: Object - Default loaders used internally by Next.js:

  • babel：Object - 默认 babel-loader 配置。

    ¥babel: Object - Default babel-loader configuration.

defaultLoaders.babel 的示例用法：

¥Example usage of defaultLoaders.babel:

nextRuntime

请注意，当 nextRuntime 是 "edge" 或 "nodejs" 时，isServer 是 true，nextRuntime "edge" 目前仅适用于边缘运行时中的中间件和服务器组件。

¥Notice that isServer is true when nextRuntime is "edge" or "nodejs", nextRuntime "edge" is currently for middleware and Server Components in edge runtime only.