Next.js SEO — rendering-strategier, Metadata API og App Router
Next.js understøtter Static Generation, SSR og ISR i samme app. App Router's Metadata API håndterer SEO-konfiguration per route med TypeScript-support. Rendering-strategi per side afgør crawlbarhed og performance.
Next.js er et React-framework der understøtter Static Generation (SSG), Server-Side Rendering (SSR) og Incremental Static Regeneration (ISR) i samme applikation. Det er det mest udbredte JavaScript-framework til produktionssites og understøtter komplekse applikationer med mixed rendering-strategier.
App Router Metadata API
App Router (Next.js 13+) introducerede Metadata API som den kanoniske måde at håndtere meta tags. I stedet for at manipulere <head> direkte eksporterer du et metadata-objekt fra route-filen:
// app/ordbog/[slug]/page.tsx
import type { Metadata } from 'next';
export async function generateMetadata({ params }): Promise<Metadata> {
const article = await getArticle(params.slug);
return {
title: article.meta_title,
description: article.meta_description,
alternates: {
canonical: `https://example.dk/ordbog/${params.slug}`,
},
openGraph: {
title: article.meta_title,
description: article.meta_description,
},
};
}generateMetadata er async og kan hente data — det giver dynamiske meta tags baseret på CMS-indhold uden separate API-kald på klienten.
Rendering-strategi og SEO
Static Generation (SSG): generateStaticParams genererer alle mulige slug-varianter ved build-tid. Sider caches som statiske HTML-filer. Optimal performance, fuld crawlbarhed.
Incremental Static Regeneration (ISR): export const revalidate = 3600 sætter revalideringsinterval i sekunder. Sider er statiske men opdateres periodisk — godt til semi-dynamisk indhold.
Server-Side Rendering (SSR): export const dynamic = 'force-dynamic' tvinger SSR. Genererer HTML på server ved hvert request — relevant for realtidsdata men højere TTFB.
Sitemap-generering
// app/sitemap.ts
import { MetadataRoute } from 'next';
export default async function sitemap(): MetadataRoute.Sitemap {
const articles = await getAllArticles();
return articles.map(article => ({
url: `https://example.dk/ordbog/${article.slug}`,
lastModified: article.updated_at,
changeFrequency: 'monthly',
priority: article.tier === 'pillar' ? 1.0 : 0.8,
}));
}Server Components og SEO
App Router’s React Server Components sender ikke JavaScript til klienten for komponenter der ikke behøver interaktivitet. Det reducerer JavaScript-payload markant sammenlignet med Pages Router og bringer Next.js tættere på Astros performance-karakteristika for content-tunge sider.
Image-optimering og Core Web Vitals
next/image håndterer automatisk WebP-konvertering, responsive srcset og lazy loading. For SEO er det kritisk at LCP-elementet (typisk hero-billedet) ikke lazy-loades — brug priority prop på det primære billede:
import Image from 'next/image';
<Image
src={article.heroImage}
alt={article.heroAlt}
width={1200}
height={630}
priority // Preload LCP-element
/>Uden priority på LCP-billedet er dårlige Core Web Vitals et forudsigeligt resultat. next/image without priority lazy-loader alle billeder som standard.
Robots.txt og OpenGraph
Next.js App Router har native support for robots.ts i app-mappen:
// app/robots.ts
export default function robots() {
return {
rules: { userAgent: '*', allow: '/' },
sitemap: 'https://example.dk/sitemap.xml',
};
}OpenGraph-billeder genereres dynamisk via opengraph-image.tsx i App Router — nyttigt til automatisk genererede preview-billeder per artikel.
Hvornår Next.js er det rigtige valg til SEO
Next.js er det foretrukne valg når sitet kombinerer statisk og dynamisk indhold i samme applikation, teamet arbejder i React, eller ISR er en relevant strategi for semi-dynamiske sider. For ren statisk content (blog, dokumentation) er Astro typisk mere performant med lavere JavaScript-overhead. Next.js’s styrke er fleksibiliteten: SSG, SSR og ISR kan kombineres per route i samme app — ingen andre frameworks matcher denne fleksibilitet.
Deployment
Next.js er optimeret til Vercel-deployment, men kører på enhver Node.js-runtime. Cloudflare Pages og Netlify understøtter Next.js med edge-functions. Static export (output: 'export' i next.config.js) genererer ren statisk HTML uden runtime-afhængighed — men mister ISR og SSR-kapaciteter.
Andre artikler i samme emne
Ofte stillede spørgsmål
- Hvad er forskellen på App Router og Pages Router i Next.js til SEO?
- Pages Router (Next.js <13) brugte `next/head` til meta tags og `getStaticProps`/`getServerSideProps` til data fetching. App Router (Next.js 13+) introducerede Metadata API: du eksporterer et `metadata`-objekt eller `generateMetadata`-funktion fra hver route-fil — ingen manual `<head>`-manipulation. App Router er anbefalingen for nye projekter. Metadata API er mere præcis og understøtter TypeScript-autocomplete for alle meta-felter.
- Hvad er Incremental Static Regeneration (ISR) og hvornår er det relevant til SEO?
- ISR genererer sider statisk men revaliderer dem efter et defineret interval (sekunder). Eksempel: `export const revalidate = 3600` revaliderer siden maksimalt én gang i timen. Det giver statisk performance (cachet HTML fra edge) med periodisk opdatering af indhold — relevant for sider med indhold der ændrer sig men ikke realtids: nyhedssider, produkt-lagerstatus, blog-feeds. Fra et SEO-perspektiv er ISR overlegen over ren SSR fordi caching giver lavere TTFB.
- Hvordan genererer man sitemap i Next.js App Router?
- Next.js App Router har built-in sitemap support via `app/sitemap.ts`. Eksportér en funktion der returnerer et array af `MetadataRoute.Sitemap`-objekter: `{ url, lastModified, changeFrequency, priority }`. Next.js genererer automatisk `/sitemap.xml`. For dynamisk indhold (blog, e-commerce) henter sitemap-funktionen URL'er fra din datakilde. Alternativt kan `next-sitemap`-pakken bruges som en enklere løsning.
- Hvad er Next.js's performance sammenlignet med Astro til SEO-orienterede sites?
- For ren content-sites (blog, dokumentation, ordbog) sender Next.js mere JavaScript end Astro — React-runtime er altid inkluderet. Det giver typisk lavere Lighthouse Performance-score end et tilsvarende Astro-site. Next.js er det bedre valg når: (1) teamet allerede arbejder i React, (2) sitet har interaktive komponenter der nyder godt af React-modellen, (3) ISR er en relevant rendering-strategi for dele af sitet. For statiske content-sites uden React-afhængighed er Astro mere performant.
- Hvad er de hyppigste SEO-fejl i Next.js-projekter?
- De hyppigste SEO-fejl i Next.js App Router: (1) Manglende generateMetadata — uden den arver siden root layout's metadata og alle sider får samme title og description. (2) Client-side rendering af kritisk indhold via use client-komponenter — indhold der renderes client-side er ikke synligt i den serverede HTML. (3) Konflikt mellem robots.txt og robots metadata-feltet — brug Next.js Metadata API konsekvent. (4) Manglende next/image på LCP-elementer — next/image er ikke automatisk og ukomprimerede images er en hyppig årsag til dårlige Core Web Vitals.