概要
Tocbot という目次を作成できるライブラリを使って、Next.js製マークダウンブログに目次機能を実装します。
実施環境
- Next.js 13.4
- App Router
- Tailwind CSS（JITモード使用）
導入
以下のコマンドを実行してTocbotをインストールします。Headingタグにidを付与するために、rehype-slugもインストールしておきます。（インストールしないと目次をクリックしても飛ばない）
1npm install tocbot rehype-slug実装
今回はこのブログを例に実装します。目次用のコンポーネントToc.tsxを作成し以下のようにします。
1"use client";
2
3import { useEffect } from "react";
4import tocbot from "tocbot";
5
6export const Toc = () => {
7 useEffect(() => {
8 tocbot.init({
9 // 目次を表示させたいところのクラス名
10 tocSelector: ".toc",
11 // どこから目次を作成するか
12 contentSelector: ".prose",
13 // どの見出しを目次にするか
14 headingSelector: "h2, h3",
15 });
16 return () => tocbot.destroy();
17 }, []);
18
19 return (
20 // tocSelectorの対象
21 <div className="toc"></div>
22 );
23};useEffectを使っているので、App Routerでは"use client"を先頭に書く必要があります。
目次の装飾はtocSelectorで指定した要素にCSSを書いたりすればOKです。参考にこのブログのCSSを載せておきます。
1.toc {
2 @apply px-2;
3}
4
5.toc-list-item {
6 @apply py-1 text-gray-500;
7}
8
9.toc-list-item .toc-list {
10 @apply pt-1 pl-3;
11}
12
13.is-active-link {
14 @apply text-gray-950 font-bold;
15}まとめ
こんな感じで目次を実装してみました。Tocbotを使うとかなり簡単に目次を実装することができるので、ぜひ導入してみてください。それでは！