商品詳細ページで、商品名を使ってtitleやdescriptionを動的に設定したいです。App Routerで適切なのはどれですか？

解説

正解: page.tsxまたはlayout.tsxでgenerateMetadataをexportするApp Routerでは、静的なmetadataオブジェクトまたは動的なgenerateMetadata関数でhead情報を生成できます。商品IDからデータを取得してtitleやdescriptionを返すことで、初期HTMLにSEO向けのメタ情報を含められます。補足: ページ本文でも同じ商品データを取得する場合、fetchのメモ化を活用すると重複取得を抑えられることがあります。A. Client Component内のuseEffectでdocument.titleだけを更新する: ブラウザ実行後の変更になり、初期HTMLのSEO情報として弱くなります。B. middleware.tsでHTMLのheadタグを書き換える: Middlewareはメタデータ生成のための主な仕組みではありません。C. route.tsでmetaタグのHTML文字列を返す: Route HandlerはAPIレスポンス用で、ページのmetadata設定には使いません。D. page.tsxまたはlayout.tsxでgenerateMetadataをexportする: これが正解です。