nextjs 如何配置 svg 文件，使其像 react 组件一样导入?
当前 next.js 开发环境我使用了--turbo 来开启 turbopack 加速文件构建，所以之前的一些 webpack loader 之类的无法正常工作。通过搜索发现一般都是使用@svgr/webpack来处理 svg，打开svgr 官网发现有 nextjs 配置示例，
按照上面的配置后发现无效，组件直接报错了。思考了许久才发现是因为我在开发环境使用了--turbo，所以一些 webpack 的 loader 加载器不支持。
所以当时的笨方法是把.svg 内容复制下来放到封装的 react 组件里。
偶然间在next.js的官网文档里 turbo 的介绍中发现就有@svgr/webpack 的示例
直接在 next.config.js 里这样配下就好了，现在 Next.js 会把 import 进来的 svg 处理成 react 组件。
我来更新啦!! 离大谱，找个 bug 找了几个小时才发现。。。一直提示这个最小化问题 也没有相关代码，只能开发和生产环境一个个对比。
需要开发环境使用了 turbopack，Nextjs 生产环境构建并不会使用 turbopack，所以如果我们只配置了 experimental 的话，pnpm build构建然后运行会直接报错的，因为它无法将字符串的 svg 路径当成组件来加载，所以还需要在 webpack 里配置，具体看上面 svgr/webpack 的示例。
2025.05.15
截止到最新的 nextjs v15 版本，next.config.ts 已经废弃了 turbo 属性而改为 turbopack。
log
