Rendezvous-Tokyo

Next.jsのブログで各記事ごとに動的にタイトルを変える

結論

usedocumenttitle (opens new window)を使う。

記事ごとのタイトルにできる。

トップページは別にしたり。

実装方法

  1. ライブラリの追加
yarn add @uidotdev/usehooks
  1. pages/posts/[slug].tsx を修正
// これを追記
import { useDocumentTitle } from "@uidotdev/usehooks"; 

...

export default function Post({ postData, tags }: PostProps) {
  // これを追記
  useDocumentTitle(`${postData.title} - SlowLifeHack`);
  
  const [htmlContent, setHtmlContent] = useState('');
  ...

  useEffect(() => {
    ...
  }, [postData, router]);

  ...

  return (
    <div className="flex flex-col md:flex-row">
      ...
    </div>
  );
}

以上。

注意点

useDocumentTitle();の記述場所をreturn()の直前にしていたら以下のエラーと遭遇した。
ので1番上で記述するようにした。

./pages/posts/[slug].tsx
40:3  Error: React Hook "useDocumentTitle" is called conditionally. React Hooks must be called in the exact same order in every component render.  react-hooks/rules-of-hooks

嬉しかったこと

GoogleAnalyticsの表示回数が正確にわかるようになる。
対応前まで (not set) でカウントされていた。

以上。