javascript / intermediate
Snippet
Dynamisches SEO mit generateMetadata
Next.js ermöglicht die dynamische Erstellung von Metadaten für eine Seite basierend auf Parametern oder abgerufenen Daten. Dies ist entscheidend für SEO und Social-Media-Sharing in dynamischen Anwendungen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
import { Metadata } from 'next';export async function generateMetadata({ params }): Promise<Metadata> {const product = await fetchProduct(params.id);return {title: product.name,description: `Buy ${product.name} for only ${product.price}`,openGraph: { images: [product.image] }};}
nextjs
Erklärung
1
export async function generateMetadata
Eine reservierte Next.js-Funktion zur Definition der Head-Tags für ein spezifisches Routensegment.
2
const product = await fetchProduct(params.id)
Ruft Daten ab, die für die Metadaten erforderlich sind (Next.js dedupliziert diesen Abruf automatisch).
3
return { title: product.name, ... }
Gibt ein Metadata-Objekt zurück, das Titel, Beschreibungen und OG-Tags definiert.