Next.js Metadata opdateres ikke? Her er hvorfor

Du opdaterer generateMetadata, omimplementerer, og den gamle titel eller billede vises stadig, når du deler linket. Her kan du se, om det er et cachelag eller en kodefejl.

Reproducerbart eksempel

Dette ser korrekt ud, men vil fortsætte med at vise forældede metadata efter en indholdsændring:

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-kaldet her cachelagres som standard af Next.jss datacache. Hvis post.title eller post.image ændres i din CMS, vil denne funktion ikke se den nye værdi, før cachen genvalideres. Uden nogen eksplicit strategi kan det betyde, at det ikke er før den næste fulde build.

Hvorfor dine metadata ikke opdateres

Den underliggende hentning er cachelagret

Som standard cachelagres fetch() inde i generateMetadata på ubestemt tid i App-routeren. Ret ved at indstille et eksplicit genvalideringsvindue:

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

Eller fravælg helt cachelagring for denne anmodning:

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

Ruten er statisk genereret

Hvis ruten bruger generateStaticParams uden genvalidering konfigureret, indbygges hele ruten, inklusive metadata, på byggetidspunktet. Tilføjelse af export const revalidate = 3600; på sideniveau fremtvinger periodisk regenerering.

En CDN eller edge cache serverer den gamle HTML

Selvom din build er korrekt, kan Vercel's Edge Network, Cloudflare eller en anden CDN foran din app vise et cachelagret HTML-svar, der går forud for din rettelse. Tjek svaroverskrifter:

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

Se efter x-vercel-cache: HIT eller en lignende CDN header. Et HIT betyder, at du ser på en cachelagret kopi, ikke din seneste implementering.

opengraph-image.ts opfanger ikke nye data

Hvis du bruger den filbaserede opengraph-image.ts-konvention, genererer Next.js som standard et statisk billede på byggetidspunktet. Dynamisk indhold inde i det er underlagt de samme cacheregler som enhver anden serverkomponent, så tilføj eksplicit genvalidering, hvis det skal forblive frisk.

Det er faktisk platformens cache, ikke din

Den mest almindelige falsk alarm. Din app kan levere helt friske metadata, mens Facebook, LinkedIn eller Slack stadig viser en forhåndsvisning, de cachelagde for dage siden. Bekræft, hvad din server sender, før du trykker på en Next.js-kode. Se vores guide til at rydde OG-cache på hver platform.

Trin-for-trin rettelsesvejledning

1. Kør curl -s https://yoursite.com/page | grep -i "og:" for at se, hvad din server rent faktisk sender
2. Tjek efter en CDN cache HIT header med curl -I https://yoursite.com/page
3. Tilføj eksplicit revalidate eller cache: "no-store" til hentning inde i generateMetadata
4. Tving en ny implementering for at udelukke en forældet build-cache
5. Bekræft liveresultatet med Proovd

Next.js vs. andre rammer

Tjekliste til hurtig rettelse

Ofte stillede spørgsmål