Open5ヶ月前にコメント追加1

フロントエンドに関する執筆メモ

Next.js

React

TypeScript

ごま野しぐれ

ページごとにタイトルを変えるにはどうしたらよいか

next.jsの機能に、Metadataを追加する機能があるため、そちらを利用する。
リファレンスを見ながら実装すればよい。

具体的には、layout.tsx またはpage.tsxにmetadataという変数名で宣言すればよい。（動的に生成したいのであれば、generateMetadataという関数も存在する）

app/layout.tsx

import type { Metadata } from "next";
import Favicon from "./favicon.ico";
export const serviceName = "サービス名";

export const metadata:Metadata = {
  title: {
    default: `Dashboard | ${serviceName}`,
    template: `%s | ${serviceName}`,
  },
  description: "Generated by create next app",
  generator: "Next.js",
  robots: { index: true, follow: true },
  appleWebApp: { capable: true, title: serviceName },
  icons: { icon: Favicon.src, apple: Favicon.src },
};

親ページのメタデータを継承するため、サイト内の標準となる情報についてはapp直下のlayout.tsx内で記述してしまうと便利。

ページごとにタイトルを変える方法

next.jsではタイトルに簡単なテンプレートが使える。title.templateにテンプレートを仕込むと、各ページごとに設定されたtitleを、テンプレートの%sにあたる部分へ置換してくれる。

app/layout.tsx

import type { Metadata } from "next";
export const metadata:Metadata = {
  title: {
    default: "", //defaultは設定する必要がある
    template: "%s | サービス名",
  },
...
};

子ページで以下のように実装する

app/hoge/page.tsx

import type { Metadata } from "next";
export const metadata:Metadata = {
  title: "子ページだよ",
}

// タイトルは`子ページだよ | サービス名`

子ページでMetadataを宣言しない場合、親ページのtitle.defaultが利用されるため注意。

子ページが動的な場合(/posts/[id]/のようなパスになるもの)はgenerateMetadataを利用すると、idを引数にとることができるため、idをもとに動的にMetadataを設定できる。