メタデータ
画面に出ない文字がある
ここまでで、fleama の画面はひととおり出るようになりました。ところがブラウザのタブを見ると、まだ何も書かれていません。検索結果に出る説明文も空のままです。
タブの文字や検索結果の説明文は、画面の中ではなく HTML の head に入ります。React だけで作っていたときは、この部分を触る手段が用意されていませんでした。Next.js には専用の書き方があります。
metadata という名前の変数
layout.tsx か page.tsx の中で、metadata という名前のオブジェクトを export します。名前が決まっているので、Next.js がそれを見つけて head に書き出してくれます。
export const metadata = {
title: "fleama",
description: "使わなくなったものを、次の人へ",
};title がタブに出る文字、description が検索結果に出る説明文です。関数の中ではなくファイルの一番外側に書きます。ページを描く関数とは別物なので、export default の外に並べて置きます。
1か所書けば全ページに効く
app/layout.tsx はすべてのページを囲む枠でした。ここに書いた metadata は、その下にあるページ全部に効きます。一覧ページに移ってもタイトルは残ります。
ページごとに変えたいときは、そのページの page.tsx に metadata を書きます。レイアウトのものとページのものは重なり、同じ項目があればページ側が勝ちます。つまり、共通のものはレイアウトに1回、変えたいところだけページに書く、という分け方になります。
どのページでも同じでよい description を毎ページに書き写す必要はありません。ここが metadata のいちばん楽なところです。
演習
app/layout.tsx に metadata を書いて、fleama の全ページにタイトルと説明文を付けます。