Next.js 14中如何同时配置SVGR与默认图片加载器？

核心问题分析 #

Next.js内置图片加载器默认处理SVG文件，添加@svgr/webpack后，需明确区分两种导入场景：带?react后缀的SVG作为组件加载，不带后缀的作为静态资源（URL或base64）加载。之前配置失败大概率是因为未精准定位并修改Next.js内置规则的匹配条件，或是规则结构定位错误。

具体解决步骤 #

1. 精准配置next.config.js的webpack规则 #

在next.config.js中通过webpack函数修改规则，确保两种导入方式匹配对应加载器：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    // 收集所有处理SVG的内置规则（包括oneOf分组内的规则）
    const svgRules = [];
    config.module.rules.forEach(rule => {
      if (rule.test?.test?.('.svg')) svgRules.push(rule);
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.test?.test?.('.svg')) svgRules.push(oneOfRule);
        });
      }
    });

    // 修改内置SVG规则，排除带?react的请求
    svgRules.forEach(rule => {
      rule.resourceQuery = { not: [/react/] };
    });

    // 添加SVGR规则，仅处理带?react的SVG
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/, // 仅在JS/TSX文件中生效
      resourceQuery: /react/, // 匹配带?react的导入
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

export default nextConfig;

2. 清除缓存并验证 #

修改配置后，先清除webpack缓存再重启开发服务器：

npx next clean
npm run dev

3. 排查其他冲突 #

• 暂时注释其他自定义SVG相关规则，验证是否存在多规则冲突
• 确认@svgr/webpack版本与Next.js 14兼容，建议使用最新稳定版

关键注意点 #

Next.js的webpack规则多嵌套在oneOf分组中，直接修改顶层规则可能无效，必须精准定位所有处理SVG的内置规则，通过resourceQuery排除带?react的请求；同时让SVGR规则仅匹配带该后缀的导入，实现两种场景互不干扰。

内容的提问来源于stack exchange，提问作者tremby