Next.jsのブログで各記事ごとに動的にタイトルを変える
結論
usedocumenttitle (opens new window)を使う。
記事ごとのタイトルにできる。
トップページは別にしたり。
実装方法
- ライブラリの追加
yarn add @uidotdev/usehooks
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)
でカウントされていた。
以上。