javascript / expert
Snippet
Dynamische Metadaten-Komposition mit Eltern-Segment-Auflösung
Next.js ermöglicht eine anspruchsvolle Vererbung von Metadaten. Experten-Implementierungen nutzen das `parent`-Promise innerhalb von `generateMetadata`, um Metadaten aus übergeordneten Layouts aufzulösen und zusammenzuführen. Dies stellt sicher, dass verschachtelte Routen globale Titel und SEO-Arrays (wie OpenGraph-Bilder) intelligent erweitern können, anstatt sie einfach zu überschreiben, was die Markenkonsistenz über tiefe URL-Strukturen hinweg wahrt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
export async function generateMetadata({ params }, parent) {const parentMetadata = await parent;const id = (await params).id;const product = await fetchProduct(id);return {title: `${product.name} | ${parentMetadata.title.absolute}`,openGraph: {images: [product.image, ...parentMetadata.openGraph.images],},};}
nextjs
Erklärung
1
const parentMetadata = await parent;
Löst das Metadaten-Promise aus dem übergeordneten Layout oder Segment auf.
2
title: `${product.name} | ${parentMetadata.title.absolute}`
Setzt einen neuen Titel zusammen, indem produktspezifische Daten an den absoluten Titel der Eltern angehängt werden.
3
...parentMetadata.openGraph.images
Verwendet den Spread-Operator, um Eltern-Bilder mit lokalen, routenspezifischen Assets zusammenzuführen.