javascript / expert
Snippet
Dynamic Metadata Composition with Parent Resolution
Next.js allows for sophisticated metadata inheritance. Expert implementations use the `parent` promise within `generateMetadata` to resolve and merge metadata from higher-level layouts. This ensures that nested routes can intelligently extend global titles and SEO arrays (like OpenGraph images) rather than simply overwriting them, maintaining brand consistency across deep URL structures.
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
Breakdown
1
const parentMetadata = await parent;
Resolves the metadata promise from the parent layout or segment.
2
title: `${product.name} | ${parentMetadata.title.absolute}`
Composes a new title by appending product-specific data to the parent's absolute title.
3
...parentMetadata.openGraph.images
Uses the spread operator to merge parent images with local route-specific assets.