NextJS 13 App目录下SVG导入异常，如何正确使用？

问题描述 #

迁移到Next.js 13的App目录后，PNG图片可正常导入，但SVG图片出现异常。此前在Pages目录下能正常运行的导入方式，在App目录中失效：

import Logo from 'public/company.svg';

控制台打印的图片对象显示：

{
  src: '/_next/static/media/company.99a082b8.svg',
  height: 32,
  width: 162
}

但实际/_next/static/media/目录下并无该SVG文件。

更新：已通过SVGR将SVG作为组件导入，组件可正常运行，但构建环节仍存在问题。

解决方案 #

方法1：直接使用next/image引用静态SVG #

在App目录下，无需导入SVG文件，直接通过next/image的src属性指向public目录下的SVG路径即可：

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/company.svg"
      alt="Company Logo"
      width={162}
      height={32}
    />
  );
}

Next.js会自动处理静态资源的路径映射与优化，无需手动导入。

方法2：配置SVGR解决SVG组件的构建问题 #

若需将SVG作为React组件使用，仅安装SVGR不足以解决构建问题，需在Next.js配置中添加webpack规则：

1. 安装依赖：

npm install @svgr/webpack --save-dev

2. 修改next.config.js，添加webpack配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    // 配置webpack将SVG转换为React组件
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

3. 导入并使用SVG组件：

import Logo from './public/company.svg';

export default function Page() {
  return <Logo />;
}

该配置会让webpack在构建阶段正确处理SVG文件，避免资源缺失问题。

注意事项 #

• 避免混合使用两种方式：若已通过SVGR配置组件导入，请勿再用next/image引用同一SVG文件，防止冲突。
• 确保public目录下的SVG文件路径、大小写完全匹配，Next.js对路径大小写敏感。

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