Next.js
SEO

Next.jsでパンくずリストを実装する方法

パンくずリスト（Breadcrumbs）は、ウェブサイトのユーザーインターフェースにおいて、現在のページがサイト内のどの位置にあるかを示すナビゲーションの一種です。ユーザーが現在地を把握しやすく、また、前のページに戻りやすくするために役立ちます。Next.jsでは、動的なルーティングが可能なので、パンくずリストを実装することも非常に簡単です。 この記事では、Next.jsでパンくずリストを実装する方法について説明します。

#1. パンくずリストの基本的な構造

パンくずリストは通常、次のような形式で表示されます：

ホーム > カテゴリ > サブカテゴリ > 現在のページ

このようなリストは、リンクが「>」で区切られており、ユーザーが現在のページから上層階層に遡ることができるようになります。

#2. Next.jsでの動的ルーティングとパンくずリスト

Next.jsは動的ルーティングに対応しており、ページURLをパラメータとして取得することができます。これにより、パンくずリストの階層を動的に生成することが可能です。

2.1 シンプルな静的パンくずリストの実装

まず、静的なパンくずリストの例を見てみましょう。pagesディレクトリにhome.jsとcategory.js、product.jsという3つのページを作成します。

// pages/index.js (ホーム)
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/category">
        <a>Go to Category</a>
      </Link>
    </div>
  );
}



// pages/category.js (カテゴリ)
import Link from 'next/link';

export default function Category() {
  return (
    <div>
      <h1>Category</h1>
      <nav>
        <Link href="/">
          <a>Home</a>
        </Link>
        {' > '}
        <span>Category</span>
      </nav>
      <Link href="/product">
        <a>Go to Product</a>
      </Link>
    </div>
  );
}



// pages/product.js (商品ページ)
import Link from 'next/link';

export default function Product() {
  return (
    <div>
      <h1>Product</h1>
      <nav>
        <Link href="/">
          <a>Home</a>
        </Link>
        {' > '}
        <Link href="/category">
          <a>Category</a>
        </Link>
        {' > '}
        <span>Product</span>
      </nav>
    </div>
  );
}

この実装では、Home → Category → Productという静的なパンくずリストが各ページに表示されます。しかし、動的なURLに対応するために、この構造を変更する必要があります。

2.2 動的URLに対応したパンくずリスト

Next.jsでは、動的ルーティングを使ってページパラメータを取得できます。これを利用して、パンくずリストを動的に生成します。

例えば、categoryページに商品IDが動的に追加される場合を考えます。


// pages/category/[id].js (カテゴリIDを動的に受け取る)
import { useRouter } from 'next/router';
import Link from 'next/link';

export default function CategoryDetail() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Category: {id}</h1>
      <nav>
        <Link href="/">
          <a>Home</a>
        </Link>
        {' > '}
        <Link href="/category">
          <a>Category</a>
        </Link>
        {' > '}
        <span>{id}</span>
      </nav>
    </div>
  );
}

ここで、[id].jsというファイルを作成し、useRouterを使ってidパラメータを取得します。このページでは、URLに基づいた動的なパンくずリストが表示されます。

#3. カスタムフックを使ったパンくずリストの管理

アプリケーション全体で一貫したパンくずリストを管理したい場合、カスタムフックを作成して、どのページでも再利用できるようにすることができます。これにより、パンくずリストのロジックを一元管理できます。


// hooks/useBreadcrumbs.js
import { useRouter } from 'next/router';

export function useBreadcrumbs() {
  const router = useRouter();
  const { query, pathname } = router;
  const breadcrumbs = [];

  if (pathname === '/') {
    breadcrumbs.push({ name: 'Home', href: '/' });
  }

  if (pathname.startsWith('/category')) {
    breadcrumbs.push({ name: 'Category', href: '/category' });
    if (query.id) {
      breadcrumbs.push({ name: `Category ${query.id}`, href: `/category/${query.id}` });
    }
  }

  return breadcrumbs;
}

このカスタムフックを使って、パンくずリストを表示します。


// pages/category/[id].js
import { useBreadcrumbs } from '../../hooks/useBreadcrumbs';

export default function CategoryDetail() {
  const breadcrumbs = useBreadcrumbs();

  return (
    <div>
      <h1>Category Details</h1>
      <nav>
        {breadcrumbs.map((breadcrumb, index) => (
          <span key={index}>
            {index > 0 && ' > '}
            <Link href={breadcrumb.href}>
              <a>{breadcrumb.name}</a>
            </Link>
          </span>
        ))}
      </nav>
    </div>
  );
}

#4. まとめ

Next.jsでは、動的ルーティングを活用して、簡単にパンくずリストを実装できます。useRouterを使って現在のページの情報を取得し、Linkコンポーネントを使ってパンくずリストを表示することができます。また、カスタムフックを使うことで、再利用可能なパンくずリストのロジックを作成することができ、アプリ全体で一貫したナビゲーションを提供できます。

これらを活用して、ユーザーにとって直感的なナビゲーションを提供することができ、サイトの使いやすさを向上させることができます。

タグ一覧