ホーム>Next.js>Tocbotを使ってマークダウンブログに目次を実装
🖨️

Tocbotを使ってマークダウンブログに目次を実装

概要

Tocbotという目次を作成できるライブラリを使って、Next.js製マークダウンブログに目次機能を実装します。

実施環境

  • Next.js 13.4
  • App Router
  • Tailwind CSS(JITモード使用)

導入

以下のコマンドを実行してTocbotをインストールします。Headingタグにidを付与するために、rehype-slugもインストールしておきます。(インストールしないと目次をクリックしても飛ばない)

npm install tocbot rehype-slug

実装

今回はこのブログを例に実装します。目次用のコンポーネントToc.tsxを作成し以下のようにします。

"use client";
import { useEffect } from "react";
import tocbot from "tocbot";
export const Toc = () => {
useEffect(() => {
tocbot.init({
// 目次を表示させたいところのクラス名
tocSelector: ".toc",
// どこから目次を作成するか
contentSelector: ".prose",
// どの見出しを目次にするか
headingSelector: "h2, h3",
});
return () => tocbot.destroy();
}, []);
return (
// tocSelectorの対象
<div className="toc"></div>
);
};

useEffectを使っているので、App Routerでは"use client"を先頭に書く必要があります。

目次の装飾はtocSelectorで指定した要素にCSSを書いたりすればOKです。参考にこのブログのCSSを載せておきます。

.toc {
@apply px-2;
}
.toc-list-item {
@apply py-1 text-gray-500;
}
.toc-list-item .toc-list {
@apply pt-1 pl-3;
}
.is-active-link {
@apply text-gray-950 font-bold;
}

まとめ

こんな感じで目次を実装してみました。Tocbotを使うとかなり簡単に目次を実装することができるので、ぜひ導入してみてください。それでは!

About

Sandyマンのうまのアイコン

Sandyマン

趣味的にブログをやったり開発をしてる暇人。JavaScriptやPythonについての記事を書いたりしています。