Förklaring

Metadata i Next.js App Router genereras på servern och skrivs in i HTML-headen. Klientkomponenter körs i webbläsaren och har ingen möjlighet att påverka HTML-headen direkt. Exporterar du metadata från en fil med 'use client' ignoreras den och Next.js visar ett fel.

Situationen uppstår ofta när en page-fil behöver både metadata för SEO och interaktivitet för klientfunktionalitet. Lösningen är att dela upp ansvaret mellan två filer.

Vanliga orsaker

En page.js eller layout.js har både 'use client'-direktiv och export const metadata.

Lösning

Behåll page.js som server-komponent och flytta interaktiviteten till en separat klientkomponent:

// app/about/page.js — server-komponent, ingen 'use client'
export const metadata = { title: 'Om oss' };

import AboutContent from './AboutContent';

export default function Page() {
  return <AboutContent />;
}

// app/about/AboutContent.js
'use client';
import { useState } from 'react';
// interaktiv logik här