Next.jsでパンクズリストを作る

<BreadCrumb
        lists={[
          {
            name: "ホーム",
            path: "/",
          },
          {
            name: "会社概要",
          },
        ]}
      />
...

import Link from "next/link";
import breadCrumbStyles from "./styles/components/BreadCrumb.module.scss";

type Props = {
  lists: {
    name: string;
    path?: string;
  }[];
};

export const BreadCrumb = ({ lists }: Props) => {
  return (
    <ol className={`${breadCrumbStyles["list"]}`} aria-label="breadcrumb">
      {lists.map(({ name = "ホーム", path = "/" }, index) => (
        <li className={`${breadCrumbStyles["item"]}`} key={index}>
　　　　// 最後の要素以外は項目の右に 「>」 マークを表示させる。
          {lists.length - 1 !== index ? (
            <Link href={path}>
              <a className={`${breadCrumbStyles["next"]}`}>{name}</a>
            </Link>
          ) : (
            <span aria-current="page">{name}</span>
          )}
        </li>
      ))}
    </ol>
  );
};

.next {
  &::after {
    content: "";
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    display: inline-block;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin: 0 6px 2px 4px;
  }
}

.list {
  display: flex;
}

.item {
  font-size: 11px;
  color: #aba4a2;
}