Next.jsで複数ページを作ったのに、ブラウザのタブに表示される名前がどのページでも同じ、というつまずきに出会ったことはないでしょうか。AIに「商品詳細ページを作って」と頼むと、こんな構成が返ってくることがあります。

// app/layout.tsx（全ページ共通）
export const metadata = {
  title: "My Shop",
};

// app/products/[id]/page.tsx（商品詳細ページ）
export default function ProductPage({ params }) {
  return <div>{/* 商品情報の表示 */}</div>;
}

このコード自体は動きます。商品詳細ページは問題なく表示されます。ただし、ブラウザのタブを見ると、トップページを開いていても、商品詳細ページを開いていても、ずっと「My Shop」のままです。

【何が起きているか】
Next.jsでは、ページごとにタブの名前（タイトル）を変えたい場合、そのページ自身にmetadataを書く必要があります。layout.tsxに書いたtitleは、あくまで「そのページが自分のtitleを用意していないときのデフォルト」でしかありません。商品詳細ページのファイルにmetadataが一切書かれていなければ、Next.jsは常にレイアウト側のタイトルを使い続けます。

見た目上のページの中身は正しく作れているので、動作確認をしていても気づきにくいポイントです。タブの名前は画面の外側にあるので、意識して確認しないと見落とします。

【直し方】

// app/products/[id]/page.tsx
export async function generateMetadata({ params }) {
  const { id } = await params;
  const product = await getProduct(id);
  return {
    title: `${product.name} | My Shop`,
  };
}

export default async function ProductPage({ params }) {
  const { id } = await params;
  return <div>{/* 商品情報の表示 */}</div>;
}

商品名のように、ページを開いてみないと分からない値をタイトルに使いたい場合は、generateMetadataという関数を使います。ここで取得したデータを使ってタイトルを組み立てれば、商品ごとに違うタブ名を表示できます。固定の文字列でよいページ（お問い合わせページなど）であれば、export const metadata = { title: "..." }をそのページのファイルに書くだけで足ります。

【AIに確認するときの聞き方】
新しいページを作ってもらったら、「このページ専用のタイトルは設定されていますか？」と一言確認するだけで、この種の見落としはその場で気づけます。タブの名前はブックマークや検索結果にも影響する部分なので、ページを増やすたびに確認しておくと安心です。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

プログラミングの知識だけでなく、AIへの指示の出し方や、AIが出してきたコードを自分の言葉で確認する目も、教材を進める中で自然に身についていきます。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください