概要

nextjsを使った簡単なパンくずリストの作成方法がなかったのでメモ程度に投稿しておきます。

特徴

現在のpathから自動的にパンくずリストを作成します。
現在のpathを取得する方法は、useRouter()のasPathが便利（pathnameでは、ダイナミックルーティン時のパスが取得できないため注意）
パンくずリストの文字列を変更するためには、別途propsなどを作成する必要あり。

コード

tsxファイルは以下。

BreadCrumb.tsx

import { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
import styles from "../styles/BreadCrumb.module.css";

export const BreadCrumb: NextPage = () => {
  const router = useRouter();

  // pathを「/」で分解
  const paths = decodeURI(router.asPath).substring(1).split("/");

  // リンク先アドレスの取得
  const roots = [""];
  for (let i = 0; i < paths.length; i++) roots.push(roots[i] + "/" + paths[i]);

  return (
    <div className={styles.container}>
      {/* Homeのリンク */}
      <Link href={"/"}>
        <a className={styles.link}>Top</a>
      </Link>
      {paths.map((x, i) => (
        <>
          {/* サブページのリンク */}
          {">"}
          <Link href={roots[i + 1]} key={i}>
            <a className={styles.link}>{x}</a>
          </Link>
        </>
      ))}
    </div>
  );
};

CSSは参考程度に。

BreadCrumb.module.css

.container {
  margin: 1rem 0.5rem;
}

.link {
  margin: 0 1rem;
}

.link:hover {
  text-decoration: underline;
}

感想

パンくずリスト作成には、nextjs- breadcrumbsというパッケージがあるようですが、自分の環境(nextjs-12.3.1)では非対応だったため、今回作りました。