開発日記-2024-08-22 / Next.jsのtitleのtemplateは下位のpage.tsxの場合に有効

Next.jsのMetadataのtitleのtemplateは下位のpage.tsxの場合に有効

ディレクトリ構成

上記のようなディレクトリ構成で app/layout.tsx にMetadataのtitleを次のように定義する。

app/layout.tsx

export const metadata: Metadata = {
  title: {
    absolute: 'My Website',
    template: '%s - My Website',
  },
}

その時 app/page.tsx で以下のようにMetadataを設定した場合<title>は App となる。

app/layout.tsx

export const metadata: Metadata = {
  title: 'App'
}

また、 app/news/page.tsx で以下のようにMetadataを設定した場合<title>は News - My Website となる。

app/layout.tsx

export const metadata: Metadata = {
  title: 'News'
}