Next.js 15.1.8中SVG的SVGR配置及next.config.ts最佳实践问询

针对Next.js 15.1.8（2025年5月版本）搭配@svgr/webpack 8.1.0的场景，以下是经过验证的稳定配置方案，既支持将本地SVG导入为React组件，也能兼容experimental.turbo的优化规则，避免配置偏离后的无效提示：

完整next.config.ts配置 #

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      rules: {
        // 对齐turbo与webpack的SVG处理规则，避免优化流程冲突
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
  webpack(config) {
    // 排除Next.js内置的SVG文件处理规则，避免重复解析冲突
    const fileLoaderRule = config.module.rules.find(rule => 
      rule.test?.test?.('.svg')
    );

    if (fileLoaderRule) {
      fileLoaderRule.exclude = /\.svg$/;
    }

    // 添加@svgr规则，仅在JS/TSX文件中导入SVG时转换为React组件
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

export default nextConfig;

配置核心说明 #

• turbo规则适配：在experimental.turbo.rules中明确SVG的加载器与输出格式，确保turbo的编译优化流程能正确识别自定义的SVG处理逻辑，这是避免AI修改建议失效的关键——多数AI方案会忽略turbo规则对齐，导致资源处理流程冲突。
• Webpack规则隔离：先排除Next.js内置的file-loader对SVG的处理，再添加专属的@svgr规则，同时通过issuer限制触发条件，避免影响静态SVG资源的正常引用。
• 路径别名兼容：确保tsconfig.json中已配置@别名映射到项目根目录，示例配置如下：

  {
    "compilerOptions": {
      "paths": {
        "@/*": ["./*"]
      }
    }
  }
  

常见失效原因排查 #

若调整配置后出现无效提示，大概率是以下问题：

• 未排除Next.js内置的SVG处理规则，导致@svgr与file-loader同时解析SVG引发冲突；
• turbo规则未与webpack规则对齐，turbo的资源优化流程无法识别自定义逻辑；
• 随意变更@svgr/webpack版本，当前方案已适配8.1.0版本，请勿擅自升级或降级至未验证版本。

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