Next.jsにおけるパンくずリストの実装例

Breadcrumbs.tsx

import React from 'react'
import Link from 'next/link'

type PageBreadcrumbsPropsType = {
  lists: { [key: string]: string }[]
}

export const PageBreadcrumbs: React.VFC<PageBreadcrumbsPropsType> = ({ lists }) => {
  return (
    <nav aria-label="現在位置">
      <ol itemScope itemType="http://schema.org/BreadcrumbList">
        {lists.map(({ string, path }, index: number) => (
          <li key={index} itemProp="itemListElement" itemScope itemType="http://schema.org/ListItem">
            {lists.length - 1 !== index ? (
              <>
                <Link href={path} passHref>
                  <a itemProp="item">
                    <span itemProp="name">{string}</span>
                  </a>
                </Link>
                <span role="img" aria-hidden="true">&gt;</span>
                <meta itemProp="position" content={`${index + 1}`} />
              </>
            ) : (
              <>
                <span itemProp="item" aria-current="location">
                  <span itemProp="name">{string}</span>
                </span>
                <meta itemProp="position" content={`${index + 1}`} />
              </>
            )}
          </li>
        ))}
      </ol>
    </nav>
  )
}