Next.js(v14,AppRouter)で動的にタイトルを変更する方法

はじめに

Next.jsでhtmlのdocument.titleを動的に設定する方法を解説します。

サーバー側からの処理

これはMetadataAPIを使えばすぐにできます。具体的にはgenerateMetadata関数をエクスポートするだけです。

クライアント側からの処理

クライアント側でタイトルを書き換えるのにはMetadataAPIは使用できません。 そのため、useHooksなどのReact用のライブラリを使用する必要があります。(custom hooksでも同じことができますが、ここではライブラリを使用します。)

useHooksのuseDocumentTitleを使った場合は以下のようになります。

1"use client"
2export default function Page(){
3  const title= //Todo: タイトルの内容を取得する
4  useDocumentTitle(title)
5}

このようにすることでclient側からもタイトルを変更できます。ただし、この場合はlayout.tsxで設定したtemplateは使用できなくなるのでご注意ください。

最後に

この方法は、VocabPhraseを開発していた際に、ファイルを開いたらそのファイル名をhtmlのタイトルと同期させるのに使用した方法です。