ページごとにタイトルや OGP を設定したい。どうしますか。
page や layout から metadata を export します。固定値ならオブジェクト、データで変わるなら generateMetadata という関数を export する形になります。
面接官が見ているのはMetadata API を知っているか。
よくある答えと、面談でどう見られるか
- page や layout から metadata（動的なら generateMetadata）を export する
layout と page でマージされます。ただし浅いマージなので、openGraph のような入れ子は page 側で書いた時点で layout 側が丸ごと消えます。og:description だけ本番で消えている、という事故の原因になります。 - layout の中で head タグを自分で書く
重複の整理もマージも効かなくなります。用意されている仕組みを使います。 - metadata を export する
正解です。データによって変わる場合は generateMetadata を使います。 - next.config で一括設定する
ページごとの設定はできません。設問はページごとの設定です。
面接官は何を見ているか
- metadata の export（または generateMetadata）を挙げた
- head タグを自前で書くのではないと理解している
- 親子でマージされる点に触れられればなお良い
模範解答
page.tsx や layout.tsx から metadata を export します。固定値なら metadata というオブジェクトを、データによって変わるなら generateMetadata という関数を export します。
自分で head タグを書くのではなく、この仕組みに任せます。Next.js が重複を整理して出力してくれますし、layout で定義した内容と page で定義した内容がマージされます。
ただしマージの仕方には注意が要ります。公式が明記している通り、これは浅いマージです。同じキーは後のセグメントで置き換えられます。title のような単純な値なら期待通りですが、openGraph のような入れ子は「page 側で openGraph を書いた時点で、layout 側の openGraph が丸ごと消えます」。
たとえば layout に openGraph の title と description を書き、page で openGraph の title だけを上書きすると、description は出力から消えます。共通部分を別ファイルの変数に切り出して、各ページで展開して混ぜるのが公式の推奨する回避策です。
動的なページでは generateMetadata の中でデータを取得できます。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。
観点をすべて押さえられた場合
generateMetadata の中でもデータを取得すると、同じ取得が2回走りませんか。一部しか触れられなかった場合
metadata を設定しないと、何が困りますか。触れられなかった場合
metadata を設定しないと、何が困りますか。