如何配置Turbopack根据资源查询以两种方式加载SVG？

需求 #

• 当导入路径为 '.../file.svg?react'（带 ?react 资源查询）时，使用 @svgr/webpack 将 SVG 转换为 React 组件
• 当导入路径为 '.../file.svg'（不带资源查询）时，保留 Next.js 默认加载逻辑，返回 StaticImageData 类型

配置代码 #

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      rules: {
        // 匹配带 ?react 查询的 SVG，转为 React 组件
        '*.svg?react': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
        // 匹配不带查询的 SVG，使用默认加载器
        '*.svg': {
          as: '*.svg',
        },
      },
    },
  },
}

配置说明 #

• Turbopack 的规则支持通过资源查询后缀进行精确匹配，*.svg?react 会优先命中带 ?react 参数的 SVG 文件，通过 @svgr/webpack 处理后输出为 JS 模块（对应 React 组件）
• 不带查询的 *.svg 规则会沿用 Next.js 内置的 SVG 加载逻辑，返回用于 next/image 的 StaticImageData 对象
• Turbopack 会自动优先匹配更具体的规则（带查询的规则优先级高于不带的），因此无需额外配置排除逻辑

内容的提问来源于stack exchange，提问作者Mir-Ismaili