App Routerで「You are attempting to export metadata from a component marked with use client」というエラーが出ました。正しい対応はどれですか？

解説

正解: metadataをServer Componentのpage.tsxまたはlayout.tsx側へ移すApp RouterのmetadataやgenerateMetadataはサーバー側で処理されるSEO用の仕組みです。ファイルにクライアント用のディレクティブがあると、そのファイルはClient Component境界になり、metadataをexportできなくなります。補足: インタラクティブなUIは子のClient Componentに切り出し、page.tsxやlayout.tsxはServer Componentとして残すと、SEO設定とクライアントUIを両立できます。A. metadataをClient Component内に残し、useMemoで包む: useMemoはブラウザ側の計算であり、metadata exportの制限は解消しません。B. metadataの代わりにuseEffectでdocument.titleを設定する: 初期HTMLのSEO情報としては不十分です。C. metadataをServer Componentのpage.tsxまたはlayout.tsx側へ移す: これが正解です。D. metadataをRoute HandlerからJSONとして返す: Metadata APIの使い方ではありません。