# 错误：发现重复的 元素。每个文档只允许一个 元素。 - **ID:** `nextjs/next-head-element-duplicate` - **领域:** nextjs - **类别:** build_error - **验证级别:** ai_generated - **修复率:** 95% ## 根因 在 Next.js app 目录中，多个布局或页面导出了 元素，导致 HTML 输出中出现重复的 head 标签。 ## 版本兼容性 | 版本 | 状态 | 引入 | 弃用 | |------|------|------|------| | next@13.4.0 | active | — | — | | next@14.0.0 | active | — | — | | next@14.2.0 | active | — | — | ## 解决方案 1. ``` 从布局和页面中移除所有手动 标签。在根布局中使用 generateMetadata 设置元数据： export const metadata = { title: '我的应用', description: '描述', }; 然后在子页面中导出 generateMetadata 来覆盖特定值。 ``` 2. ``` 如果使用自定义根布局，确保根 layout.tsx 文件中只有一个 标签，并从子组件中移除。 ``` 3. ``` 对于使用 pages 目录的旧页面，保留 next/head，但避免与 app 目录布局混合。 ``` ## 无效尝试 - **** — This creates multiple head elements, which is exactly the error. Metadata should be centralized. (95% 失败率) - **** — next/head is deprecated in the app directory; it causes hydration errors and duplicate head issues. (85% 失败率) - **** — The build will fail; this is a blocking error that prevents successful compilation. (100% 失败率)