Next.js Metadata uppdateras inte? Här är varför

Du uppdaterar generateMetadata, distribuerar om, och den gamla titeln eller bilden visas fortfarande när du delar länken. Så här avgör du om det är ett cachinglager eller ett kodfel.

Reproducerbart exempel

Detta ser korrekt ut men kommer att fortsätta visa inaktuell metadata efter en innehållsä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],
    },
  };
}

Anropet fetch här cachelagras av Next.jss datacache som standard. Om post.title eller post.image ändras i din CMS, kommer den här funktionen inte att se det nya värdet förrän cachen valideras. Utan någon explicit strategi kan det betyda inte förrän nästa fullbyggda.

Varför din metadata inte uppdateras

Den underliggande hämtningen cachelagras

Som standard cachelagras fetch() inuti generateMetadata på obestämd tid i approutern. Åtgärda genom att ställa in ett explicit förlängningsfönster:

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

Eller välj bort cachelagring helt för den begäran:

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

Rutten genereras statiskt

Om rutten använder generateStaticParams utan omvalidering konfigurerad, bakas hela rutten, inklusive metadata, in vid byggtiden. Att lägga till export const revalidate = 3600; på sidnivå tvingar fram periodisk regenerering.

En CDN eller edge-cache serverar den gamla HTML-koden

Även om din konstruktion är korrekt, kan Vercels Edge Network, Cloudflare eller en annan CDN framför din app visa ett cachat HTML-svar som föregår din fix. Kontrollera svarsrubriker:

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

Leta efter x-vercel-cache: HIT eller en liknande CDN header. En HIT betyder att du tittar på en cachad kopia, inte din senaste distribution.

opengraph-image.ts plockar inte upp ny data

Om du använder den filbaserade opengraph-image.ts-konventionen, genererar Next.js en statisk bild vid byggtid som standard. Dynamiskt innehåll inuti det är föremål för samma cachningsregler som alla andra serverkomponenter, så lägg till explicit förlängning om det behöver hålla sig uppdaterat.

Det är faktiskt plattformens cache, inte din

Det vanligaste falsklarmet. Din app kan visa helt färsk metadata medan Facebook, LinkedIn eller Slack fortfarande visar en förhandsvisning som de cachade för flera dagar sedan. Bekräfta vad din server skickar innan du trycker på någon Next.js-kod. Se vår guide för att rensa OG-cache på varje plattform.

Steg-för-steg-fixguide

1. Kör curl -s https://yoursite.com/page | grep -i "og:" för att se vad din server faktiskt skickar
2. Sök efter en CDN cache HIT rubrik med curl -I https://yoursite.com/page
3. Lägg till explicit revalidate eller cache: "no-store" för hämtningar inuti generateMetadata
4. Tvinga en ny implementering för att utesluta en inaktuell byggcache
5. Verifiera liveresultatet med Proovd

Next.js kontra andra ramverk

Quick Fix Checklista

Vanliga frågor