[5]Next.jsチュートリアルを進められたのでやってみる(5)ページ間の移動

## はじめに
今回の記事では、Next.jsチュートリアル第5章「ページ間の移動」を進めていきます。

https://nextjs.org/learn/dashboard-app/navigating-between-pages

#### 前回の記事

https://qiita.com/2201009-kikukawa/items/36d65823ac6119ccef7d

## chapter5:ページ間の移動
この章では以下の内容について学ぶことができます。

 - next/linkコンポーネントの使用方法
 - usePathname()を使用してアクティブなリンクを表示する方法
 - Next.js でのナビゲーションの仕組み

## next/link コンポーネント
従来のページ遷移には`<a>`タグを利用していましたが、`<a>`タグでは遷移する際にページ全体が更新されてしまい、読み込みが発生します。
Next.jsではそれを改善するためのコンポーネントとして`next/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`コンポーネントを使用するために`next/link`を`import`します。

使用方法は`<a>`タグと同じで、`href`に遷移したいページのリンクを指定するだけです。

ですが、`<a>`タグよりも高速に画面遷移します。

仕組みとしてはNext.jsではLinkコンポーネントがある場合は自動的に遷移先のページのコードをバックグラウンドで取得するようで、これにより瞬時にページ遷移ができるみたいです。

## usePathname()
`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';

 
// ...
```

`usePathname()`はフックなので`nav-links.tsx`を`クライアントコンポーネント`に変える必要があるため、ファイルの先頭に`use client`を記述します。
次に`next/navigation`から`usePathname()`をインポートします。

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

上記のコードで`pathname`という定数に現在のパスを代入しています。
最終的なコードは以下のようになります。
```/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';

// Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database.
const links = [
  { name: 'Home', href: '/dashboard', icon: HomeIcon },
  {
    name: 'Invoices',
    href: '/dashboard/invoices',
    icon: DocumentDuplicateIcon,
  },
  { name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
];

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>
        );
      })}
    </>
  );
}
```
このコードでは2章で学習した`clsx`を利用してユーザーが現在アクセスしているリンクの背景を青く表示するようにしています。
以下の写真のようになっていればOKです。

下の画像では、/dashboard/page.tsxにいます
![スクリーンショット 2024-04-21 225000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619847/d66b383f-6d9b-59d3-37ab-997bbb27f745.png)

## おわりに
今回の記事ではページ間の移動について学びました。
linkコンポーネントを利用するだけで、ページ遷移の読み込みがなくなってWebアプリのような動きになるの凄いですね。
Next.js恐るべし・・・。

## 次の記事