コンテンツへスキップ

5

ページ間ナビゲーション

前の章では、ダッシュボードレイアウトとページを作成しました。今度は、ユーザーがダッシュボードルート間を移動できるように、いくつかのリンクを追加しましょう。

この章では…

以下は、取り上げるトピックです。

next/linkコンポーネントの使い方。

usePathname()フックを使用してアクティブなリンクを表示する方法。

Next.jsにおけるナビゲーションの仕組み。

ナビゲーションを最適化する理由

従来、ページ間をリンクするには、<a> HTML要素を使用していました。現時点では、サイドバーのリンクは<a>要素を使用していますが、ブラウザでホーム、請求書、顧客ページ間を移動したときに何が起こるかを確認してください。

気づきましたか？

ページのナビゲーションごとに、完全なページの更新が行われています！

Next.jsでは、アプリケーション内のページ間をリンクするために<Link />コンポーネントを使用できます。<Link>を使用すると、JavaScriptによるクライアントサイドナビゲーションを行うことができます。

<Link />コンポーネントを使用するには、/app/ui/dashboard/nav-links.tsxを開き、next/linkからLinkコンポーネントをインポートします。次に、<a>タグを<Link>に置き換えます。

/app/ui/dashboard/nav-links.tsx
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

ご覧のように、Linkコンポーネントは<a>タグを使用する場合と似ていますが、<a href="…">の代わりに<Link href="…">を使用します。

変更を保存して、ローカルホストで動作を確認してください。これで、完全な更新を表示せずにページ間を移動できるはずです。アプリケーションの一部はサーバーでレンダリングされますが、完全なページの更新は行われないため、Webアプリケーションのように感じられます。なぜでしょうか？

自動コード分割とプリフェッチ

ナビゲーションエクスペリエンスを向上させるために、Next.jsはルートセグメントごとにアプリケーションを自動的にコード分割します。これは、ブラウザが初期ロード時にすべてのアプリケーションコードをロードする従来のReactSPAとは異なります。

ルートごとにコードを分割することで、ページが分離されます。特定のページでエラーが発生しても、アプリケーションの残りの部分は引き続き機能します。

さらに、本番環境では、<Link>コンポーネントがブラウザのビューポートに表示されるたびに、Next.jsはリンクされたルートのコードをバックグラウンドで自動的にプリフェッチします。ユーザーがリンクをクリックするまでに、目的ページのコードは既にバックグラウンドでロードされているため、ページ遷移がほぼ瞬時に行われます！

ナビゲーションの仕組みの詳細については、こちらをご覧ください。

一般的なUIパターンとして、ユーザーが現在どのページにいるかを示すアクティブなリンクを表示することがあります。これを行うには、URLからユーザーの現在のパスを取得する必要があります。Next.jsは、パスをチェックしてこのパターンを実装するために使用できるusePathname()というフックを提供しています。

usePathname()はフックであるため、nav-links.tsxをクライアントコンポーネントにする必要があります。ファイルの先頭にReactの"use client"ディレクティブを追加し、next/navigationからusePathname()をインポートします。

/app/ui/dashboard/nav-links.tsx
'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  InboxIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
 
// ...

次に、<NavLinks />コンポーネント内でpathnameという変数にパスを代入します。

/app/ui/dashboard/nav-links.tsx
export default function NavLinks() {
  const pathname = usePathname();
  // ...
}

CSSスタイリングに関する章で紹介したclsxライブラリを使用して、リンクがアクティブな場合にクラス名を条件付きで適用できます。link.hrefがpathnameと一致する場合、リンクは青いテキストと薄い青の背景で表示されるようにする必要があります。

nav-links.tsxの最終コードを以下に示します。

/app/ui/dashboard/nav-links.tsx
'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
 
// ...
 
export default function NavLinks() {
  const pathname = usePathname();
 
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

保存してローカルホストを確認してください。アクティブなリンクが青で強調表示されているはずです。

この章を完了しました5

Next.jsでのページ間のリンク方法とクライアントサイドナビゲーションの活用方法を学習しました。

次のステップ

6：データベースの設定

実際のデータのフェッチを開始するためにデータベースを作成しましょう！

第6章を開始する