Next.js Discord

Discord Forum

Metadata.title.template not applied to nested layout

Unanswered
Himalayan posted this in #help-forum
Open in Discord
Avatar
HimalayanOP
I have the following structure:
app/
├─ layout.tsx - defines title template (see below)
├─ (default)/
    ├─ layout.tsx - defines title, is correctly added to the template
    ├─ page.tsx
        ├─ about/
            ├─ layout.tsx - defines title - is NOT correctly added to the template
            ├─ page.tsx


app/layout.tsx title template defined as:

export const metadata: Metadata = {
  title: {
    default: 'My App',
    template: '%s | My App'
  }
};


Layouts below this are defined as:

export const metadata: Metadata = {
  title: 'My page'
};

When viewing /about in the browser, the title is just "My page", where I would expect it to be "My page | My App"

Does anyone have idea why the title template isn't being used in the about layout? Thank you!

7 Replies

Avatar
Bohemian Waxwing
can you send the "(default)/layout.tsx" code?
Avatar
HimalayanOP
@Bohemian Waxwing Here it is, as you can see, it's just a bare bones implementation at the moment:
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home'
};

const DefaultLayout = ({ children }: { children: React.ReactNode }) => {
  return children;
};

export default DefaultLayout;
Avatar
HimalayanOP
@Bohemian Waxwing I've created a Codesandbox for it. Unfortunately Codesandbox doesn't seem to display page titles in the browser tab, but this will demonstrate the structure and code. I'm now wondering if I need to also specify the template in (default)/layout.tsx

https://codesandbox.io/p/sandbox/proud-haze-hkxgvj
Avatar
Bohemian Waxwing
Meta data need to send to child.
Avatar
HimalayanOP
Sorry, could you please give more details? Are you referring to generateMetadata? I see here that it has access to the parent metadata: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
Avatar
Bohemian Waxwing
Yeah. That's the way
Avatar
HimalayanOP
@Bohemian Waxwing Thank you for your help! 🙂