naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

目次

最近更新された記事

🧜‍♀️

beautiful-mermaid を使ってみた

約5時間前·2026年02月01日
  • Markdown
📦

Changesets でモノレポのリリースを自動化する(個人開発向け設定)

約8時間前·2026年01月31日
  • Changesets
  • npm
  • GitHub
🎤

GitHub Actions で npm パッケージを公開する(アルファ版向け簡易フロー)

約11時間前·2026年01月31日
  • GitHub
  • npm
💗

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

公開日1年以上前2024-08-22
履歴GitHubで見る
MarkdownRaw Content
  • 開発日記
  • Next.js
  • Changesets

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

ディレクトリ構成
  • app
    • news
      • page.tsx
    • layout.tsx
    • 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'
}

Changesetsについて調べた時に読んだページ

Changesetsで柔軟に変更を管理する
zenn.dev favicon
zenn.dev
Changesetsで柔軟に変更を管理する
Changesetsで頑張らないリリース(モノレポ対応)
zenn.dev favicon
zenn.dev
Changesetsで頑張らないリリース(モノレポ対応)
pnpm と Changesets を組み合わせて使用する | pnpm
At the time of writing this documentation, the latest pnpm version was
pnpm.io favicon
pnpm.io
pnpm と Changesets を組み合わせて使用する | pnpm