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

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

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

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

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:

// 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

请注意，当 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.