Next.js v14.2.1公共目录SVG导入失效，v14.0.3版本可正常使用

问题原因分析 #

更新依赖后出现Module not found，大概率是这几个原因：

• Next.js版本升级后，默认不再支持直接import public目录下的SVG文件（public目录资源原本设计是通过URL直接访问，而非作为模块导入）
• 之前项目靠自定义webpack配置或SVGR支持SVG组件导入，更新后依赖缺失或配置失效
• 模块解析规则变化，原本的路径别名（比如public/*）配置失效

解决方案 #

方案1：改用静态资源URL引用（推荐） #

public目录下的资源不需要import，直接通过根路径引用即可，比如在组件里这样写：

<img src="/images/svgs/cart-icon.svg" alt="购物车图标" />

这是Next.js官方推荐的public目录使用方式，不会受版本升级影响。

方案2：配置SVGR支持SVG组件导入 #

如果需要把SVG当作React组件使用（比如要修改颜色、添加事件），按以下步骤操作：

1. 安装SVGR依赖：

npm install @svgr/webpack

2. 修改next.config.js，添加webpack规则：

const nextConfig = {
  webpack(config) {
    // 给SVG添加SVGR处理规则
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/, // 只处理js/ts/jsx/tsx文件中的导入
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

3. 确保导入路径正确：如果是相对路径，要从当前组件位置指向SVG文件；如果用了路径别名，检查jsconfig.json或tsconfig.json里的paths配置是否还在，比如：

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

方案3：回退关键依赖版本 #

如果以上方法都不行，可以尝试锁定Next.js或相关依赖的版本，比如在package.json里指定之前能正常运行的Next.js版本，然后重新执行npm install。

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