I want to achieve Page | NestedLayout | RootLayout with the following but I am getting Page | NestedLayout.
// Root Layout
export const metadata = {
title: {
template: '%s | RootLayout',
default: 'RootLayout',
},
}
// Nested Layout
export const metadata = {
title: {
template: '%s | NestedLayout',
default: 'NestedLayout',
},
}
// Page
export const metadata = {
title: 'Page',
};
@kc-username
Based on the documentation, in the App Router, metadata title templates are evaluated in order starting from the root segment down to the final page segment [1]. Each segment can define its own metadata, but they follow specific rules for merging and inheritance:
- Title templates only apply to child segments below where they are defined [2]
- Each title template requires its own default title [2]
Here’s an example of how title templates work across segments:
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
template: '%s | Acme',
default: 'Acme', // a default is required when creating a template
},
}
(Functions: generateMetadata | Next.js)
When a child page defines its title:
import type { Metadata } from 'next'
export const metadata: Metadata = { title: 'About', }
If you need to bypass a parent’s template, you can use title.absolute in a child segment:
import type { Metadata } from 'next'
export const metadata: Metadata = { title: { absolute: 'About', }, }