Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第3章：Next.jsらしさ – Metadata

React Next.js
スポンサーリンク

この課題のねらい

この演習は、「Next.jsらしいメタデータの設定」に慣れることが目的です。
特に、

title（ブラウザタブや検索結果のタイトル）
description（検索結果の説明文）

を、Next.js の Metadata API を使って設定できるようになることがゴールです。

Metadataの基本イメージ

なぜtitleとdescriptionを設定するのか

title と description は、画面にはほとんど出てきませんが、

ブラウザのタブに表示されるタイトル
検索エンジンの検索結果のタイトル・説明
SNSでURLを共有したときに参照される情報の土台

として、とても重要です。

Next.js の App Router では、metadata というオブジェクトを export することで、
この title / description を簡単に設定できます。

必須課題① layout.tsxでtitleを設定

ルートレイアウトでサイト全体のタイトルを決める

まずはアプリ全体の基本タイトルを、app/layout.tsx で設定します。
next から Metadata 型をインポートし、metadata をエクスポートします。

// app/layout.tsx
import type { ReactNode } from "react";
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Next.js × React 入門講座",
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}
TSX

ここで重要なのは、

export const metadata: Metadata = { ... } という形で定義する
title に文字列をセットすると、ブラウザタブのタイトルとして反映される

という 2 点です。

これで、どのページを開いても基本のタイトルが「Next.js × React 入門講座」になります。

必須課題② layout.tsxでdescriptionを設定

descriptionを追加して検索結果の見え方を整える

同じ metadata の中に description も追加します。

// app/layout.tsx
import type { ReactNode } from "react";
import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Next.js × React 入門講座",
  description: "Next.js と React の基礎から実践までを学べる入門講座のサンプルアプリです。",
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}
TSX

これで、

検索エンジンがこの description を「ページ概要」として参照しやすくなる
SNS などで共有したときの説明文のベースにもなる

という状態になります。

ここまでが「必須課題（全体共通の title / description を設定）」の範囲です。

挑戦課題：ページごとにtitle / descriptionを変える

page.tsxごとにmetadataを定義する

次のステップは、「ページごとに違うタイトル・説明文を持たせる」ことです。
App Router では、各ページファイル（app/xxx/page.tsx）にも metadata を定義できます。

例として、トップページと About ページで metadata を変えてみます。

トップページ / の場合

// app/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "ホーム | Next.js × React 入門講座",
  description: "Next.js × React 入門講座のホームページです。",
};

export default function HomePage() {
  return (
    <>
      <h1>ホーム</h1>
      <p>ここはトップページです。</p>
    </>
  );
}
TSX

Aboutページ /about の場合

// app/about/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "このサイトについて | Next.js × React 入門講座",
  description: "このサイトの目的や、学べる内容について説明するページです。",
};

export default function AboutPage() {
  return (
    <>
      <h1>このサイトについて</h1>
      <p>Next.js × React 入門講座のサンプルサイトです。</p>
    </>
  );
}
TSX

これで、

URL が / のとき → ホーム用の title / description
URL が /about のとき → About 用の title / description

がそれぞれ HTML の <head> 内に出力されます。

ルートの layout.tsx に書いた metadata は「デフォルト値」的に扱われ、
ページ側で同じキー（title, description）を定義すると、ページの設定が優先されます。

もう一歩：動的なページでのmetadata（頭に入れておく程度でOK）

「個別記事ページ」や「講座詳細ページ」のような動的ルート（/lessons/[id]）では、
generateMetadata という関数を使って、パラメータや外部データから metadata を生成できます。

初心者向けにはまだ早いので、ここでは名前だけ紹介しておきます。

// app/lessons/[id]/page.tsx
import type { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  // ここで id や API からタイトルを決める
  return {
    title: "レッスン詳細 | Next.js × React 入門講座",
    description: "レッスンの詳細情報を表示します。",
  };
}
TSX

「ページごとに違う metadata を出せるんだな」くらいの理解で今は十分です。

まとめ：Metadataでつかんでほしい感覚

この課題で身につけてほしいのは次の感覚です。

layout.tsx の metadata で「サイト全体の基本 title / description」を決める
各 page.tsx に export const metadata を書くと、そのページ専用の title / description を上書きできる
title / description は、ユーザーの目にはあまり見えないけれど、SEO や共有時の見え方に効いてくる「裏方情報」

ここが理解できていれば、

ホーム
講座一覧
講座詳細
プロフィール

など、ページごとに「そのページらしいタイトル」と「そのページの説明」を用意して、
ちゃんと“外から見て分かりやすいサイト”にしていけます。

スポンサーリンク
タイトルとURLをコピーしました