Next.js で作ったサイトに目次機能を追加する【Tocbot】

この記事では Next.js で作ったブログやサイトに Tocbot を使った目次機能を追加する方法を解説しています！

Tocbot とは？

指定した要素に含まれる見出しタグ（h1, h2, h3）など抽出してそれらを自動的に目次として作成してくれる便利なライブラリです。

https://tscanlin.github.io/tocbot

このブログでも実際に Tocbot を使用して目次を作成しています。

使い方

導入

まずは以下のコマンドを実行して Tocbot をインストールしていきましょう！

npm install --save tocbot

Yarn を使っている場合はこちら

yarn add tocbot

これで Tocbot を使える状態になりました。

目次を作成する

React の　useEffect で以下のように Tocbot の設定を初期化します。

import tocbot from 'tocbot'

  useEffect(() => {
    tocbot.init({
      tocSelector: '.toc',
      contentSelector: '.post',
      headingSelector: 'h2, h3',
    })

    return () => tocbot.destroy()
  }, [])

tocSelector で目次を表示させる先のクラス名
contentSelector で目次を抽出したい要素のクラス名
headingSelector 抽出したい見出しタグ

全体のコード

全体のコードとしては以下のようになります。

import { useEffect } from 'react'
import tocbot from 'tocbot'

export default function TopicsCard() {

  useEffect(() => {
    tocbot.init({
      tocSelector: '.toc',
      contentSelector: '.body',
      headingSelector: 'h2, h3',
    })

    return () => tocbot.destroy()
  }, [])

  return (
    <div>
      {/* 本文 */}
      <div className="body">
        <h2>見出し2</h2>
        <h3>見出し3</h3>
        <h2>見出し2</h2>
      </div>
      {/* 目次 */}
      <nav className="toc" />
    </div>
  )
}

この例では .body内に存在する h2 と h3 をすべて抽出し、.toc へ目次を追加しています。

スタイルを適用する

目次を適用するには公式にも書かれているように CDN でスタイルを適用するか、独自で CSS を書いていくことになります。

CDN を利用する場合は Next.js の <Head> タグへ以下のように追加すれば OK です。

<Head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css"/ >
</Head>

独自のスタイルを適用する場合は tocSelector で記載した要素に CSS を書いて適用していけば OK です。
また、Tocbot では現在アクティブになっているリンクへ .is-active-link というクラスが付与されるため、アクティブになっている要素のスタイルも変更可能です。

.toc {
  /* 目次のスタイル */
}

.toc li {
  /* 目次のリストのスタイル */
}

.toc a {
  /* 目次のリンクのスタイル */
}

.toc a.is-active-link {
  /* 現在アクティブになっている目次のスタイル */
}

まとめ

Zenn などでも使われている目次生成ライブラリである Tocbot の使い方について説明しました！
簡単に目次機能を追加でき、自由にカスタマイズもできるためオススメのライブラリです。

Gizanbeak