# Error: Duplicate element found. Only one element is allowed per document. - **ID:** `nextjs/next-head-element-duplicate` - **Domain:** nextjs - **Category:** build_error - **Verification:** ai_generated - **Fix Rate:** 95% ## Root Cause In Next.js app directory, multiple layouts or pages export elements, causing duplicate head tags in the HTML output. ## Version Compatibility | Version | Status | Introduced | Deprecated | |---------|--------|------------|------------| | next@13.4.0 | active | — | — | | next@14.0.0 | active | — | — | | next@14.2.0 | active | — | — | ## Workarounds 1. **Remove all manual 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.** (95% success) ``` Remove all manual 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. ``` 2. **If using a custom root layout, ensure only one tag exists in the root layout.tsx file, and remove any from child components.** (90% success) ``` If using a custom root layout, ensure only one tag exists in the root layout.tsx file, and remove any from child components. ``` 3. **For legacy pages using pages directory, keep next/head there but avoid mixing with app directory layouts.** (85% success) ``` For legacy pages using pages directory, keep next/head there but avoid mixing with app directory layouts. ``` ## Dead Ends - **** — This creates multiple head elements, which is exactly the error. Metadata should be centralized. (95% fail) - **** — next/head is deprecated in the app directory; it causes hydration errors and duplicate head issues. (85% fail) - **** — The build will fail; this is a blocking error that prevents successful compilation. (100% fail)