S
Shuhei
layout.tsxのmetadataってなんぞ？
2025年10月10日
Tips
見出しはありません
要約
Next.jsのバージョン14以降から追加された仕様です。私はバージョン14前後でちょうど初めてNext.jsのキャッチアップ始めていたということもあり、この子の加入はなかなかの挫折の対象でした、、、。
役割としては、各ページ単位でもしくはPJ全体でその名の通りレイアウトを設定できるやつみたいです。
この「レイアウト」の範疇が若干広いのがとっつきにくいな、、と思いましたが、裏を返すとこのファイルに書くだけでいろんなことできるんだな、と思いました。今回は、その中の一部分だけでも記録できればと思います。
まだまだ勉強中なので触っているほんの一部分だとは思いますが、紹介します
基本的なシンプルな記載は↓みたいな感じです
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 → 検索エンジンで検索したときにタイトルの下にちょっとでる説明文みたいなやつ(↓の部分)
・その他にも設定できるものがあるようです(詳しくは調べてみてください🫣)
＜設定頑張るメリットは、、？＞
気になるのがこの設定の目的ですが、一般的にはSEO対策に優位になるなど言われていますが、Google公式では、検索結果の表示順等のSEOの影響はないと出されています。
ですが、単にターゲット層の顧客へのページへの訪問、クリック率をあげる、という観点では、一定の効果は見込めると思います。ユーザーの悩みに寄り添った、クリックしたくなるようなメタディスクリプションを設定するようにしましょう。
→→Next.jsもっといろんな開発のニーズ応えてくれそうです。ためになったことはまたつらつら書いていきます！！
コメント
まだコメントはありません。
本気で学ぶなら、ShiftB
本気で学ぶなら、ShiftB
