Next.js×TypeScript×microCMSで目次を作成する

Next.js×TypeScript×microCMSで目次を作成する方法をご紹介します。

例 ： https://tkblog.netlify.app/blog/asbz5h_mr1h
目次を追加したい場合は、ブログの個別記事に当たるtsxファイルに記述します。
この記事の例では、/pages/blog/[id].tsxのコードを貼っています。

インストール

コマンドでcheerioをインストールします。

yarn  add cheerio

これでインポートが可能になります。

import cheerio from 'cheerio';

getStaticProps

  const headings = $('h2, h3, h4').toArray()
  const toc:content[] = headings.map((data) => {
    return {
      //@ts-ignore
      text: String(data.children[0].data),
      id: data.attribs.id,
      name: data.name,
    }
  })

$('h2, h3, h4').toArray()のように、$()内に目次として抽出したい要素をカンマ区切りで指定します。
各要素をどのように表示するかはdefault関数で制御します。

textには表示されるテキストが入ります。h2などのタグに挟まれるテキストのことです。
idには自動生成のidが入ります。
nameにはh2やh3などが入ります。

HTML

          <ul id="lists">
            {tableOfContents.map(content => {
              if (content.name == "h2"){
                return <li id={content.name} key={content.id}>
                  <a href={"#" + content.id}>{content.text}</a>
                </li>
              }else if (content.name=="h3"){
                return <ul><li id={content.name} key={content.id}>
                  <a href={"#" + content.id}>{content.text}</a>
                </li></ul>
              }else if (content.name=="h4"){
                return <ul><ul><li id={content.name} key={content.id}>
                  <a href={"#" + content.id}>{content.text}</a>
                </li></ul></ul>
              }
            })}
          </ul>

簡略化すると、{tableOfContents.map(content => {return HTML要素}です。
例の様に配列.mapとするとループ処理になり、contentに各要素が入ります。
(content, index)と書けばindexも利用できます。

h2,h3,h4で目次を入れ子にしたかったので、ulタグの中にulタグを入れています。