Next.js Oppdateres ikke metadata? Her er hvorfor

Du oppdaterer generateMetadata, omplasserer, og den gamle tittelen eller bildet vises fortsatt når du deler koblingen. Slik finner du ut om det er et hurtigbufferlag eller en kodefeil.

Reproduserbart eksempel

Dette ser riktig ut, men vil fortsette å vise foreldede metadata etter en innholdsendring:

export async function generateMetadata({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json());

  return {
    title: post.title,
    openGraph: {
      images: [post.image],
    },
  };
}

fetch-kallet her bufres av Next.jss databuffer som standard. Hvis post.title eller post.image endres i CMS, vil ikke denne funksjonen se den nye verdien før hurtigbufferen valideres på nytt. Uten noen eksplisitt strategi kan det bety ikke før neste fullbygg.

Hvorfor metadataene dine ikke oppdateres

Den underliggende hentingen bufres

Som standard er fetch() inne i generateMetadata bufret på ubestemt tid i App-ruteren. Rett opp ved å angi et eksplisitt revalideringsvindu:

const post = await fetch(url, { next: { revalidate: 60 } }).then(r => r.json());

Eller velg bort bufring helt for den forespørselen:

const post = await fetch(url, { cache: "no-store" }).then(r => r.json());

Ruten er statisk generert

Hvis ruten bruker generateStaticParams uten revalidering konfigurert, blir hele ruten, inkludert metadata, bakt inn på byggetidspunktet. Å legge til export const revalidate = 3600; på sidenivå fremtvinger periodisk regenerering.

En CDN eller kantbuffer serverer den gamle HTML-koden

Selv om konstruksjonen din er riktig, kan Vercels Edge Network, Cloudflare eller en annen CDN foran appen din vise et bufret HTML-svar som er før reparasjonen din. Sjekk svaroverskrifter:

curl -I https://yoursite.com/blog/post-slug

Se etter x-vercel-cache: HIT eller en lignende CDN overskrift. En HIT betyr at du ser på en bufret kopi, ikke din siste distribusjon.

opengraph-image.ts plukker ikke opp nye data

Hvis du bruker den filbaserte opengraph-image.ts-konvensjonen, genererer Next.js et statisk bilde på byggetidspunktet som standard. Dynamisk innhold inne i den er underlagt de samme bufringsreglene som enhver annen serverkomponent, så legg til eksplisitt revalidering hvis den trenger å holde seg oppdatert.

Det er faktisk plattformens cache, ikke din

Den vanligste falske alarmen. Appen din kan levere helt ferske metadata mens Facebook, LinkedIn eller Slack fortsatt viser en forhåndsvisning de bufret for dager siden. Bekreft hva serveren din sender før du berører en Next.js-kode. Se vår veiledning for å tømme OG-cache på hver plattform.

Trinn-for-trinn-rettingsveiledning

1. Kjør curl -s https://yoursite.com/page | grep -i "og:" for å se hva serveren din faktisk sender
2. Se etter en CDN cache HIT header med curl -I https://yoursite.com/page
3. Legg til eksplisitt revalidate eller cache: "no-store" for henting inne i generateMetadata
4. Tving en ny distribusjon for å utelukke en foreldet build-cache
5. Bekreft liveresultatet med Proovd

Next.js vs. andre rammer

Quick Fix Sjekkliste

Ofte stilte spørsmål