layout.tsxのmetadataってなんぞ？

投稿日: 2025年10月10日

Tips

要約

Next.js 14以降のlayout.tsxは、ページ単位またはプロジェクト全体のレイアウト設定を行うためのファイルです。
layout.tsxでは、htmlやbodyの構成に加え、ページのメタ情報を設定できることが特徴です。
親layout.tsxにおけるHeaderなどの共通要素の重要性を理解することが必要で、SEO対策にも役立ちます。

音声で記事を再生

0:00

layout.tsxってだれ？

Next.jsのバージョン14以降から追加された仕様です。私はバージョン14前後でちょうど初めてNext.jsのキャッチアップ始めていたということもあり、この子の加入はなかなかの挫折の対象でした、、、。

役割としては、各ページ単位でもしくはPJ全体でその名の通りレイアウトを設定できるやつみたいです。

この「レイアウト」の範疇が若干広いのがとっつきにくいな、、と思いましたが、裏を返すとこのファイルに書くだけでいろんなことできるんだな、と思いました。今回は、その中の一部分だけでも記録できればと思います。

できること

まだまだ勉強中なので触っているほんの一部分だとは思いますが、紹介します

ページ共通のUIレイアウトを構成できる

基本的なシンプルな記載は↓みたいな感じです
src/app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import Header from "./_components/Header";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`antialiased`}>
        <Header />
        {children}
      </body>
    </html>
  );
}

まず、export default function RootLayout({〜以下の箇所。
ここのreturn以降がこのlayout.tsxが影響を及ぼす範囲の見た目のレイアウト構成をしています。<Header/>は_componentsフォルダからimportしたHeaderコンポーネントが表示されています。{children} はこのlayout.tsxがいる階層以下の子どもたち(page.tsxたち)が表示される場所になります。

ひとつ注意しなければいけないのが、このreturn内は、

<html lang="en">
      <body>
        〜〜
      </body>
</html>

で構成する必要があります。ですがこれは「src/app」直下(親ページ)のlayout.tsxのみです。(例えば下記のファイル構成の場合)

src/app/
     page.tsx
     layout.tsx
     inquiry/
        page.tsx
        layout.tsx

inquiry/layout.tsxにも<html><body>~~~</body></html>を記載していて、<Header />は記載していない場合、/inquiry にページ遷移して入った時点でRootLayoutごと差し替えられ、Headerが存在しない別ツリーがレンダリングされます。各フォルダに置いた layout.tsx は「上のlayoutを引き継ぐ」のではなく、<html> や <body> を書いた瞬間に「上書き扱い」になります。

→全ページに表示させたいはずの<Header/> が表示されない事象が発生します。

親ページ以外のlayout.tsx は↓みたいにしましょう

export default function InquiryLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return <>{children}</>;
}

ページいろんな情報の設定ができる

次に紹介するのは、ページのいろんな設定ができるよ〜っていうことです。
というのも↑記載の上半分くらい？にある、export const metadata: Metadata = { …
の箇所です。ここにはそのページの設定を記載できます。例えばPJ作成時に初期で記載されているのが
title: "Create Next App",
description: "Generated by create next app",
でした。

title → ページをブラウザで開いたときにタブ部分に記載される文章。
description → 検索エンジンで検索したときにタイトルの下にちょっとでる説明文みたいなやつ(↓の部分)