Next.js 中无法通过 require() 动态加载 public 目录下的 SVG 文件，应直接使用以 / 开头的静态 URL 路径（如 /icons/zavod.svg），由服务端直接提供资源，避免构建时模块解析失败。
next.js 中无法通过 require() 动态加载 public 目录下的 svg 文件，应直接使用以 / 开头的静态 url 路径（如 /icons/zavod.svg），由服务端直接提供资源，避免构建时模块解析失败。
在 Next.js 应用中，所有存放在 public 目录下的静态资源（包括 SVG、PNG、JPEG 等）都会被自动映射到应用根路径下，无需导入或 require，可直接作为字符串 URL 传入 src 属性。这是 Next.js 官方推荐的静态资源引用方式，既符合构建优化逻辑，也规避了动态 require() 导致的“Cannot find module”运行时错误。
✅ 正确做法：使用绝对路径 URL
首先，确保你的 SVG 文件实际位于 public/icons/ 下（例如 public/icons/zavod.svg），然后将组件数组中的路径改为以 / 开头的公共 URL 路径：
const compButtonsArray = [
{ icon: '/icons/zavod.svg', label: 'Label 1', transitionDelay: '0s', countBtn: 'discord-button' },
{ icon: '/icons/gazprom.svg', label: 'Label 2', transitionDelay: '0.1s', countBtn: 'twitter-button' },
{ icon: '/icons/ya.svg', label: 'Label 2', transitionDelay: '0.2s', countBtn: 'reddit-button' },
];
接着，在 Button 组件中，直接将 button.icon 作为 src 值传入 require()：
<image src="%7Bbutton.icon%7D" url alt="{button.label}" width="{30}" height="{30}" classname="{styles.button_logo}"></image>
同理，主 Logo 也应简化为：
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
<image src="/button_logo.svg" require alt="IS_logo" width="{50}" height="{50}" priority classname="{styles.button_logo}"></image>
⚠️ 注意事项
- ❌
require('/icons/zavod.svg')是无效且禁止的：require()只能解析模块（如.ts,.js,.svg作为 React 组件导入），不能用于public下的静态文件。 - ✅ 所有
public内资源必须通过/xxx形式访问，Next.js 会在构建后将其复制至输出目录（.next/static/），并通过 HTTP 服务直接响应。 - ?
width和height必填（除非使用fill+objectFit布局），建议按实际尺寸设置以保障响应式渲染与性能优化。 - ? 若图片仍不显示，请检查浏览器开发者工具 Network 标签页，确认请求路径是否返回 200（如
http://localhost:3000/icons/zavod.svg），并核实文件大小写与扩展名是否完全匹配（SVG 区分大小写）。
✅ 补充建议：类型安全与可维护性
为提升代码健壮性，可定义图标路径类型并预校验：
type IconPath =
| '/icons/zavod.svg'
| '/icons/gazprom.svg'
| '/icons/ya.svg'
| '/button_logo.svg';
interface ButtonConfig {
icon: IconPath; // 限定合法路径
label: string;
transitionDelay: string;
countBtn: string;
}
这样可在编译期捕获非法路径，避免运行时出错。
遵循以上方式，即可稳定、高效地在 Next.js 中渲染 public 目录下的任意静态图片资源。
