MENU
HTML head
You can define the <title>, <link> and <meta> tags in your <head> section by exporting either a metadata object or a generateMetadata() function from a layout.js or static page.js file.
To set static metadata, export either a metadata object or a generateMetadata() function from a layout.js or static page.js file.
For metadata that doesn't rely on runtime information, use the static metadata object instead of generateMetadata().
Both static metadata and dynamic metadata using generateMetadata() are only supported in Server Components.
searchParams are only available in page.js segments.
generateMetadata() is more flexible, allowing for fetched data.
- Fetch requests are automatically memoized across generateMetadata(), generateStaticParams(), layouts, pages, and Server Components, ensuring data consistency. If fetch is unavailable, React cache can be used.
- Next.js waits for data fetching in generateMetadata() to complete before streaming the UI to the client, ensuring <head> tags are included in the first part of the streamed response.
- On initial load, streaming is delayed until generateMetadata() has fully resolved, including any content from loading.js.
- You can also use the redirect() and notFound() methods in generateMetadata().
Metadata objects exported from multiple segments within the same route are shallowly merged to create the final metadata output for the route. Duplicate keys are replaced based on their order, so nested fields defined in a segment closer to the root will be overwritten by those defined in the later segments.
The title for this page is 'Good! Good!' as it uses the title template from layout.tsx.
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />