ページのメタデータ

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

ブラウザのタブ、ブックマーク、Googleの検索結果、チャットでのリンクプレビュー：これらはすべてページの <title> タグや <meta> タグを読み取ります。Next.js では、これらのタグを手動で記述することは決してありません。

代わりに、ページまたはレイアウトは metadata というオブジェクトを export します：

// app/menu/page.jsx
export const metadata = {
    title: 'Our Menu',
    description: 'Everything we cook.',
};

export default function Menu() {
    return <h1>Our Menu</h1>;
}

名前は重要です。ルートファイルからエクスポートされる metadata という正確な名前でなければなりません。Next.js はレンダリング時にそれを読み取り、代わりに head を生成します。

Metadata（メタデータ）は、レイアウトと同じように外側から内側という順番で、ツリーを順にマージ（統合）されます。ルートレイアウトがデフォルト値を設定し、任意のページがそれを上書きできます。metadata の export が存在しないページは、レイアウトが設定した内容を単純に継承します。これまでのすべてのページがルートレイアウトの後に続いて呼ばれていたのはそのためです。

チャレンジ

初心者

現在、Coddy EatsのすべてのタブにはCoddy Eatsと表示されています。これはルートレイアウトで設定されているためです。メニューページには独自のメタデータを設定しましょう。

app/menu/page.jsxの中で、コンポーネントの上にmetadataオブジェクトをexportします。
そのtitleを正確にOur Menuに設定します。

テストは/でドキュメントのタイトルを読み取り、次に/menuに移動して再度それを読み取ります。

自分で試してみよう

import './globals.css';

export const metadata = {
    title: 'Coddy Eats',
};

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