動的メタデータ

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 15/47。

metadata オブジェクトは定数であるため、動的ルーティングには使用できません。app/dishes/[slug]/page.jsx は URL ごとに異なる dish を提供し、それぞれが独自の title を必要とします。

そのためには、代わりに関数を export します：

export async function generateMetadata({ params }) {
    const { slug } = await params;
    return { title: DISHES[slug].name };
}

ページが受け取るものと同じ params（Promise なので await します）を受け取り、metadata オブジェクトと同じ形式を返します。同じファイル内ではどちらか一方のみを使用し、両方を使用しないでください。

Title テンプレート

すべてのページのタイトルでサイト名を繰り返すのは面倒です。レイアウトはプレーンな文字列の代わりにパターンを継承できます：

// app/layout.jsx
export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

default: タイトルを設定していないページ向けのタイトル
template: タイトルを設定しているページ向けのパターン。%s の部分にそのページのタイトルが挿入されます

したがって、title: 'Margherita' を返すページはタブ内で Margherita | Coddy Eats となり、何も設定しない home ページは Coddy Eats のままになります。ブランディングは layout 内に一度だけ記述します。

チャレンジ

中級

現在、すべての料理ページでタブに Coddy Eats と表示されています。各ページに独自のタイトルを設定しましょう。

app/dishes/[slug]/page.jsx に、次を行う generateMetadata という名前の export された async 関数を追加します：

{ params } を受け取り、それを await して slug を取得する
{ title: DISHES[slug].name } を返す

app/layout.jsx にはすでにテンプレート '%s | Coddy Eats' が含まれているため、/dishes/margherita のタイトルは最終的に Margherita | Coddy Eats になるはずです。レイアウトを確認してみてください。変更する必要はありません。

自分で試してみよう

import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}