自定义 Webpack 配置

值得注意的是: 对 Webpack 配置的更改不受语义版本控制（semver）的约束，因此请自行承担风险

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

• CSS 导入
• CSS 模块
• Sass/SCSS 导入
• Sass/SCSS 模块

一些常见的需求功能可以通过插件实现：

• @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" 目前仅适用于边缘运行时的中间件和服务器组件。