Lesson 20 / 25
Metadata
Titles and descriptions per route.
Static metadata and generateMetadata
Export a metadata object from a layout or page for static values, or an async generateMetadata function for values that depend on params or data. A title template in the root layout (%s | Site) gives consistent titles; child pages supply the %s part. Metadata also covers descriptions, Open Graph and Twitter cards, canonical URLs and robots rules. Metadata is only supported in Server Components.
Polish and performance
Metadata helps sharing and search; loading and error files improve UX; built-in components optimise assets.
Titles produced by the template, run
I built the demo store with next build (Next.js 16.3.8), started it with next start and requested pages with curl; the output is copied from that run, trimmed to the relevant lines. The layout sets the template "%s | Stationery Shop" and a default; pages contributed "Counter" and the product name, and the home page used the default.
curl -s http://localhost:3917/ | grep -o "<title>.*</title>"
curl -s http://localhost:3917/counter | grep -o "<title>.*</title>"
curl -s http://localhost:3917/products/2 | grep -o "<title>.*</title>"
Output:
<title>Stationery Shop</title> <title>Counter | Stationery Shop</title> <title>Fountain pen | Stationery Shop</title>
Write unique descriptions
Each important page should have a specific title and description; duplicates hurt search snippets.
Quick check: Where is generateMetadata useful?
- For static CSS
- When titles or descriptions depend on params or data, like a product name
- For client-side state
- For database migrations
Answer
When titles or descriptions depend on params or data, like a product name — Dynamic metadata from data.