须知: 对 webpack 配置的更改不受 semver 约束，因此请自行承担风险

在继续为应用程序添加自定义 webpack 配置之前，请确保 Next.js 尚未支持您的用例：

一些常见的需求功能可作为插件使用：

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

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

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

webpack 函数会执行三次，其中两次用于服务器端（Node.js / Edge Runtime），一次用于客户端。这允许您使用 isServer 属性来区分客户端和服务器端的配置。

webpack 函数的第二个参数是一个对象，包含以下属性：

• buildId: String - 构建 ID，用作不同构建之间的唯一标识符。
• dev: Boolean - 指示是否在开发模式下进行编译。
• isServer: Boolean - 服务器端编译时为 true，客户端编译时为 false。
• nextRuntime: String | undefined - 服务器端编译的目标运行时；可以是 "edge" 或 "nodejs"，客户端编译时为 undefined。
• defaultLoaders: Object - Next.js 内部使用的默认加载器：
  • babel: Object - 默认的 babel-loader 配置。

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" 仅用于 Edge Runtime 中的代理和服务器组件。