Next.js のLink コンポーネントについて整理する

はじめに

Next.jsを使うメリットの一つにページルーティングがあります。ルーティングの方法について学んだ内容をまとめます。

使い方

以下のようなディレクトリ構成とすると

my-nextjs-app/
├── components/
│   ├── Header/
│   │   ├── Header.js
│   │   └── Header.module.css
├── pages/
│   ├── index.js
│   ├── setting.js

以下のようにコンポーネントを作成します。

export function Header() {
  return (
    <header>
      <Link href="/">
        ホーム画面
      </Link>
      <Link href="/setting">
        設定
      </Link>
    </header>
  );
}

Linkコンポーネントで括り、propsとしてhrefにパスを渡すことでルーティングが可能となります。ルートは/ で指定するだけでOKです。

同じようなリンク先を指定して遷移するものにaタグがありますが、aタグを使うと、リンク先に遷移する際にページが読み込まれてしまうため、速度が遅くなります。Linkコンポーネントの場合、ページ全体の再読み込みが走らないため、高速にページを遷移することができます。

他にもLinkコンポーネントには渡せるpropsがありますので、ドキュメントを参考にしてください。

まとめ

Next.jsのルーティングは Link コンポーネントを使うと便利