Next.js中SVG使用异常求助：logo.svg报错且无法显示

问题分析 #

你遇到的情况是：两个SVG文件一个正常渲染，另一个先抛出Server Component相关错误，加'use client'后报错消失但仍无法显示。核心原因可能是SVG文件本身的兼容性问题、webpack配置的匹配逻辑缺陷，或者导入使用方式有误。

解决步骤 #

• 检查并优化SVG文件
  浏览器能打开的SVG不一定能被@svgr正确转换成React组件。有些SVG里的<script>标签、复杂滤镜、冗余命名空间会导致转换失败。你可以：

  • 用SVG编辑器（比如Figma、Inkscape）重新导出logo.svg，选择“优化SVG”选项，去掉不必要的代码；
  • 手动删除SVG里的<script>、<style>（如果有复杂样式，建议转成CSS类后在组件中引入），清理多余的xmlns属性（保留xmlns="http://www.w3.org/2000/svg"即可）。

• 修正webpack配置的匹配逻辑
  原配置中的issuer和resourceQuery可能存在匹配范围不准确的问题，导致logo.svg没有被正确转换成组件。修改next.config.mjs如下：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack(config) {
      const fileLoaderRule = config.module.rules.find((rule) =>
        rule.test?.test?.(".svg")
      );
  
      config.module.rules.push(
        // 处理带?url后缀的SVG导入（作为资源URL使用）
        {
          ...fileLoaderRule,
          test: /\.svg$/i,
          resourceQuery: /url/,
        },
        // 把其他SVG转换成React组件
        {
          test: /\.svg$/i,
          // 明确只对JS/TS/JSX/TSX文件导入的SVG生效
          issuer: { and: [/\.(js|ts|jsx|tsx)$/] },
          // 排除带?url的情况
          resourceQuery: { not: [/url/] },
          use: ["@svgr/webpack"],
        }
      );
  
      fileLoaderRule.exclude = /\.svg$/i;
  
      return config;
    },
    // ...其他配置
  };
  
  export default nextConfig;
  

• 确认导入和使用方式
  确保在加了'use client'的组件里正确使用SVG组件，不要把它当成图片URL：

  'use client';
  import Logo from './logo.svg';
  import Menu from './menu.svg';
  
  export default function Header() {
    return (
      <header>
        {/* 直接把SVG当React组件使用，可以传递width、height等props */}
        <Logo width={60} height={60} />
        <Menu width={24} height={24} />
      </header>
    );
  }
  

• 清除缓存重新构建
  缓存可能导致新配置不生效，执行以下操作：

  1. 删除项目根目录下的.next文件夹；
  2. 执行npm run build（或你用的包管理器对应的构建命令）；
  3. 启动开发服务器测试。

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