LinkがあるのになぜuseRouterを使うの？

Next.jsでは、通常のページリンクを作るときに Linkを使います。

import Link from "next/link";

export default function Page() {
  return (
    <Link href="/blog">
      記事一覧を見る
    </Link>
  );
}

一方で、次のようなコードを見かけることもあります。

"use client";

import { useRouter } from "next/navigation";

export default function Button() {
  const router = useRouter();

  return (
    <button
      onClick={() => router.push("/blog")}
    >
      記事一覧を見る
    </button>
  );
}

ページ遷移とは？

ページ遷移とは、 現在表示しているページから 別のURLのページへ移動することです。

通常のHTMLでは、 aタグを使ってページを移動します。

Next.jsでは、サイト内のページ遷移に LinkやuseRouter()を使うことで、 ページ全体を読み直さない クライアントサイド遷移を利用できます。

useRouter()とは？

useRouter()は、 Next.jsが提供するReactのフックです。

App Routerでは、 next/navigationから読み込みます。

useRouter()から取得できるもの

const router = useRouter();

ここで取得したrouterには、 ページ遷移を操作するためのメソッドが入っています。

useRouter()にはClient Componentが必要

App Routerのコンポーネントは、 特に指定しなければServer Componentとして扱われます。

しかし、useRouter()はブラウザー上の操作に反応するフックなので、 Client Component内で使用します。

"use client";

import { useRouter } from "next/navigation";

export default function NavigationButton() {
  const router = useRouter();

  return (
    <button
      onClick={() => router.push("/blog")}
    >
      記事一覧を見る
    </button>
  );
}

useRouter()の基本的な使い方

基本的な流れは4段階です。

"use client";

import { useRouter } from "next/navigation";

export default function Button() {
  const router = useRouter();

  const handleClick = () => {
    router.push("/contact");
  };

  return (
    <button onClick={handleClick}>
      お問い合わせへ進む
    </button>
  );
}

LinkとuseRouter()の違い

LinkとuseRouter()はどちらもサイト内の移動に使えますが、 用途が異なります。

router.push()で別ページへ移動する

router.push()は、 useRouter()で最もよく使うメソッドです。

router.push("/blog");

動的なURLへ移動する

const articleId = "abc123";

router.push(`/blog/${articleId}`);

検索条件をURLへ入れる

const keyword = "Next.js";

router.push(
  `/search?keyword=${encodeURIComponent(keyword)}`
);

router.replace()で履歴を置き換える

router.replace()も別ページへ移動しますが、 push()とはブラウザー履歴の扱いが異なります。

router.replace("/mypage");

back()とforward()で履歴を移動する

useRouter()では、 ブラウザーの戻る・進む操作に相当する処理も実行できます。

"use client";

import { useRouter } from "next/navigation";

export default function BackButton() {
  const router = useRouter();

  return (
    <button onClick={() => router.back()}>
      前のページへ戻る
    </button>
  );
}

router.refresh()とは？

router.refresh()は、 現在表示しているルートを更新するためのメソッドです。

ブラウザーでページ全体を再読み込みする操作とは異なり、 現在のルートについてサーバーから新しい内容を取得し、 必要な部分を更新します。

const handleUpdate = async () => {
  await updateArticle();

  router.refresh();
};

router.prefetch()とは？

router.prefetch()は、 ユーザーが移動する可能性のあるルートを あらかじめ読み込むためのメソッドです。

router.prefetch("/contact/confirm");

ただし、通常のLinkでは、 移動先のプリフェッチが組み込まれています。 そのため、一般的なナビゲーションのためだけに useRouter()とprefetch()を使う必要はありません。

フォーム送信後にページを移動する

useRouter()が特に役立つ例が、 フォーム送信後のページ遷移です。

"use client";

import { FormEvent } from "react";
import { useRouter } from "next/navigation";

export default function ContactForm() {
  const router = useRouter();

  const handleSubmit = async (
    event: FormEvent<HTMLFormElement>
  ) => {
    event.preventDefault();

    const response = await fetch("/api/contact", {
      method: "POST",
      body: new FormData(event.currentTarget),
    });

    if (response.ok) {
      router.push("/contact/complete");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        required
      />

      <button type="submit">
        送信する
      </button>
    </form>
  );
}

microCMSを使ったサイトでの使用例

microCMSの記事一覧では、 記事カードそのものが通常のリンクであれば Linkを使うのが基本です。

記事カードはLinkを使う

import Link from "next/link";

export default function ArticleCard({
  article,
}: {
  article: {
    id: string;
    title: string;
  };
}) {
  return (
    <Link href={`/blog/${article.id}`}>
      <article>
        <h2>{article.title}</h2>
      </article>
    </Link>
  );
}

条件を確認してから移動する場合

"use client";

import { useRouter } from "next/navigation";

export default function EditButton({
  articleId,
}: {
  articleId: string;
}) {
  const router = useRouter();

  const handleClick = () => {
    const confirmed = window.confirm(
      "この記事を編集しますか？"
    );

    if (confirmed) {
      router.push(`/admin/blog/${articleId}/edit`);
    }
  };

  return (
    <button onClick={handleClick}>
      編集する
    </button>
  );
}

外部サイトへの移動には何を使う？

LinkやuseRouter()は、 主にNext.jsサイト内のルート移動に使います。

別のドメインにある外部サイトへ移動する場合は、 通常のaタグを使うのが基本です。

<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  外部サイトを見る
</a>

外部から受け取ったURLをそのまま渡さない

router.push()やrouter.replace()へ渡すURLは、 信頼できる値だけを使用します。

フォーム入力やURLパラメータなど、 ユーザーが変更できる文字列を そのまま移動先として使うのは避けます。

router.push(userInput);

const allowedPaths = [
  "/",
  "/blog",
  "/contact",
];

if (allowedPaths.includes(path)) {
  router.push(path);
}

よくあるつまずき

"use client";

import { useRouter } from "next/navigation";

export default function Button() {
  const router = useRouter();

  return (
    <button
      onClick={() => router.push("/blog")}
    >
      移動する
    </button>
  );
}

<Link href="/blog">
  記事一覧を見る
</Link>