nextjs build_error ai_generated true

Error: Duplicate <head> element found. Only one <head> element is allowed per document.

ID: nextjs/next-head-element-duplicate

Also available as: JSON · Markdown · 中文

95%Fix Rate

88%Confidence

1Evidence

2023-11-20First Seen

Version Compatibility

Version	Status	Introduced	Deprecated	Notes
[email protected]	active	—	—	—
[email protected]	active	—	—	—
[email protected]	active	—	—	—

Root Cause

In Next.js app directory, multiple layouts or pages export <head> elements, causing duplicate head tags in the HTML output.

generic

中文

在 Next.js app 目录中，多个布局或页面导出了 <head> 元素，导致 HTML 输出中出现重复的 head 标签。

Official Documentation

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

Workarounds

95% success Remove all manual <head> tags from layouts and pages. Use generateMetadata in the root layout to set metadata: export const metadata = { title: 'My App', description: 'Description', }; Then in child pages, export generateMetadata to override specific values.
```
Remove all manual <head> tags from layouts and pages. Use generateMetadata in the root layout to set metadata:

export const metadata = {
  title: 'My App',
  description: 'Description',
};

Then in child pages, export generateMetadata to override specific values.
```
90% success If using a custom root layout, ensure only one <head> tag exists in the root layout.tsx file, and remove any from child components.
```
If using a custom root layout, ensure only one <head> tag exists in the root layout.tsx file, and remove any from child components.
```
85% success For legacy pages using pages directory, keep next/head there but avoid mixing with app directory layouts.
```
For legacy pages using pages directory, keep next/head there but avoid mixing with app directory layouts.
```

中文步骤

从布局和页面中移除所有手动 <head> 标签。在根布局中使用 generateMetadata 设置元数据：

export const metadata = {
  title: '我的应用',
  description: '描述',
};

然后在子页面中导出 generateMetadata 来覆盖特定值。

如果使用自定义根布局，确保根 layout.tsx 文件中只有一个 <head> 标签，并从子组件中移除。

对于使用 pages 目录的旧页面，保留 next/head，但避免与 app 目录布局混合。

Dead Ends

Common approaches that don't work:

95% fail
This creates multiple head elements, which is exactly the error. Metadata should be centralized.
85% fail
next/head is deprecated in the app directory; it causes hydration errors and duplicate head issues.
100% fail
The build will fail; this is a blocking error that prevents successful compilation.