自定义 Webpack 配置

须知：webpack 配置的变更不受语义化版本控制约束，修改风险需自行承担

在继续为应用添加自定义 webpack 配置前，请确认 Next.js 尚未原生支持您的使用场景：

• CSS 导入
• CSS 模块
• Sass/SCSS 导入
• Sass/SCSS 模块
• 自定义 babel 配置

部分常见需求可通过插件实现：

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

要扩展我们对 webpack 的使用，您可以在 next.config.js 中定义一个用于扩展配置的函数，如下所示：

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // 重要：必须返回修改后的配置
    return config
  },
}

webpack 函数会执行三次，服务器端（nodejs/edge 运行时）两次，客户端一次。您可以通过 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 的示例：

// 配置示例：添加一个依赖 babel-loader 的加载器
// 此源码取自 @next/mdx 插件：
// 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" 时仅适用于中间件和边缘运行时中的服务端组件 (Server Components)。