TL;DR
今回は、Next.js と TypeScript を使用してパンくずリストのコンポーネントを作成する手法を詳しく解説します。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.3 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
パンくずリストのコンポーネントをつくる
初めに、パンくずリストを表示するためのコンポーネントを作成します。以下にそのソースコードを示します。
import Link from 'next/link'
import { useRouter } from 'next/router'
type BreadcrumbItem = {
text: string
href?: string
}
type BreadcrumbProps = {
items: BreadcrumbItem[]
}
const Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {
const router = useRouter()
return (
<nav aria-label="Breadcrumb">
<ol>
{items.map((item, index) => {
const isCurrent = index === items.length - 1
if (isCurrent || !item.href) {
return <li key={index}>{item.text}</li>
}
return (
<li key={index}>
<Link href={item.href}>
<a>{item.text}</a>
</Link>
</li>
)
})}
</ol>
</nav>
)
}
export default Breadcrumb
このコンポーネントでは、パンくずリストを生成するために必要な各アイテムが、BreadcrumbItem 型の配列として items プロパティで渡されます。そして、配列の各アイテムは、表示するテキストとリンク先の URL（必要な場合）を含むオブジェクトになります。
それぞれのアイテムがパンくずリストの最後のアイテムかどうかを判定するために、isCurrent を使用しています。これにより、現在のアイテム（最後のアイテム）にリンクを表示しないようにしています。これは一般的なパンくずリストの挙動と合致
します。
パンくずリストの利用
上記のコンポーネントを用いて、具体的にどのようにパンくずリストを実装できるかを見てみましょう。以下は、その一例です。
import Breadcrumb from './Breadcrumb'
const MyPage = () => {
const breadcrumbItems = [{ text: 'Home', href: '/' }, { text: 'Blog', href: '/blog' }, { text: 'My Article' }]
return (
<div>
<Breadcrumb items={breadcrumbItems} />
<h1>My Article</h1>
<p>This is my article.</p>
</div>
)
}
export default MyPage
MyPage コンポーネント内で、Breadcrumb コンポーネントを呼び出しています。パンくずリストの各アイテムは breadcrumbItems 配列に定義されており、その配列を Breadcrumb コンポーネントの items プロパティに渡しています。
パンくずリストを学ぶ
ここまで読んで、「もっと詳しく学びたい！」という方は、以下のリンクを参考にしてみてください。
| リンク | 説明 |
|---|---|
| Breadcrumb Navigation UX | パンくずリストのユーザーエクスペリエンスについて解説している記事です。 |
| A Complete Guide to Breadcrumbs | パンくずリストの作成とその使用方法についての詳細なガイドです。 |
| Breadcrumb in Next.js | Next.js でのパンくずリストの作成について具体的に解説している記事です。 |