如何在Next.js中集成@svgr/webpack与Turbopack实现SVG组件化引入？

环境准备

首先需要确保项目满足基础环境要求，本文示例基于以下版本：

• Next.js 13.4及以上版本，该版本后Turbopack已处于稳定可用状态
• Node.js 16.14及以上版本，保证依赖安装正常运行
• 已初始化完成的Next.js项目，可通过npx create-next-app@latest创建基础项目

安装依赖

首先安装@svgr/webpack到项目开发依赖中，执行以下命令：

npm install @svgr/webpack --save-dev
# 或者使用yarn
yarn add @svgr/webpack --dev

配置Next.js与Turbopack

Next.js中启用Turbopack只需要在启动命令中添加--turbo参数，修改package.json的scripts字段：

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

接下来需要在next.config.js中配置webpack规则，让@svgr/webpack处理SVG文件，同时避免和默认的SVG处理规则冲突：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    // 找到默认的svg处理规则并排除
    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
    if (fileLoaderRule) {
      fileLoaderRule.exclude = /\.svg$/;
    }
    // 添加@svgr/webpack处理规则
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

实际使用SVG组件

配置完成后就可以直接以React组件形式引入SVG文件，假设项目public目录下有一个logo.svg文件，在组件中这样使用：

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

export default function Home() {
  return (
    <div className="container">
      <h1>SVG组件化引入示例</h1>
      {/* 直接作为组件使用，可以传递className等props */}
      <Logo className="logo" style={{ width: '100px', height: '100px' }} />
    </div>
  );
}

常见问题排查

SVG引入后不显示

检查next.config.js中的webpack配置是否正确排除了默认的SVG处理规则，同时确认@svgr/webpack是否安装成功，可删除node_modules重新安装依赖。

Turbopack启动报错

确认Next.js版本是否支持Turbopack，低版本Next.js可能未集成Turbopack，升级Next.js到13.4及以上版本即可解决。

无法传递props给SVG组件

@svgr/webpack默认导出的组件支持接收className、style等标准props，如果自定义SVG内部没有正确导出根元素，需要检查SVG文件本身是否包含多个根元素，确保SVG文件结构正确。

Next.js@svgr_webpackTurbopackSVG组件化webpack配置修改时间：2026-05-31 00:13:26