Next.jsでLinkを使ってクエリパラメータを渡す方法を初心者向けに解説

Next.js Linkでクエリパラメータを渡す方法

先生と生徒の会話形式で理解しよう

生徒

「先生、Next.jsでページを移動するときに、値を渡したいんですが、どうしたらいいですか？」

先生

「Next.jsではコンポーネントを使うことでページ遷移ができます。その際にクエリパラメータを渡すことも可能です。」

生徒

「クエリパラメータって何ですか？」

先生

「クエリパラメータとは、URLの末尾に付ける追加情報のことです。例えばユーザーIDや検索ワードをURLで渡すときに使います。」

生徒

「なるほど。具体的にはどんな書き方をすればいいですか？」

先生

「では実際にプログラムの例を見てみましょう。」

1. Linkで基本的にページを移動する方法

Next.jsではコンポーネントを使うと、ページ遷移ができます。通常のHTMLのタグと似ていますが、ページ全体をリロードせずに移動できる点が特徴です。


import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>ホームページ</h1>
      <Link href="/about">Aboutページへ移動</Link>
    </div>
  );
}

（画面に「ホームページ」と表示され、「Aboutページへ移動」をクリックするとAboutページに遷移します）

2. クエリパラメータを使った基本例

URLにパラメータを付けて値を渡す場合は、hrefにオブジェクト形式でqueryを指定します。queryには渡したい値をオブジェクトで書きます。


import Link from "next/link";

export default function Home() {
  const userId = 123;

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <Link href={{ pathname: "/profile", query: { id: userId } }}>
        プロフィールを見る
      </Link>
    </div>
  );
}

（画面に「ユーザー一覧」と表示され、「プロフィールを見る」をクリックすると/profile?id=123に遷移します）

3. クエリパラメータを受け取るページ側の処理

渡したクエリパラメータはuseRouterフックを使って取得できます。


import { useRouter } from "next/router";

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

  return (
    <div>
      <h1>プロフィールページ</h1>
      <p>ユーザーID: {id}</p>
    </div>
  );
}

（画面に「プロフィールページ」と表示され、クリックしたユーザーIDが表示されます）

4. 複数のクエリパラメータを渡す方法

複数の値を渡したい場合は、queryオブジェクトに複数のプロパティを追加します。


<Link href={{
  pathname: "/search",
  query: { keyword: "Next.js", page: 2 }
}}>
  検索結果を見る
</Link>

（/search?keyword=Next.js&page=2 に遷移し、検索キーワードやページ番号を受け取ることができます）

5. クエリパラメータを文字列として渡す方法

オブジェクト形式ではなく文字列で渡すこともできます。簡単な場合はこちらの方法でもOKです。


<Link href="/profile?id=456">
  ID456のプロフィール
</Link>

（/profile?id=456 に遷移しますが、複雑な値を渡す場合はオブジェクト形式がおすすめです）

6. クエリパラメータと動的ルートの組み合わせ

Next.jsでは動的ルート（[id].jsのようなページ）とクエリパラメータを組み合わせることもできます。


<Link href={{
  pathname: "/user/[id]",
  query: { id: 789, ref: "home" }
}}>
  ユーザー789を見る
</Link>

（/user/789?ref=home に遷移し、動的ルートとクエリを同時に使用できます）

7. クエリパラメータの注意点

クエリパラメータはURLに表示されるため、個人情報や秘密情報を渡すのには向いていません。また、ブラウザの戻るボタンで値が残る場合があるので、必要に応じてstate管理と組み合わせることもあります。

8. まとめに向けたポイント整理

Next.jsのコンポーネントを使うことで、簡単にページ遷移と値の受け渡しができます。オブジェクト形式のqueryを使うと複雑なパラメータも安全に渡せます。受け取る側ではuseRouterフックを使うことで簡単に値を取得可能です。動的ルートとの組み合わせや、複数パラメータも扱えるため、様々なケースに応用できます。

まとめ

今回の記事では、Next.jsのコンポーネントを使ったページ遷移とクエリパラメータの渡し方について詳しく解説しました。Next.jsでは通常のHTMLリンクのようにタグを使わずに、を活用することでページ全体をリロードせずにスムーズにページ移動が可能になります。特にユーザーIDや検索キーワードなどの情報をページ間で受け渡したい場合には、クエリパラメータを使うことで効率的にデータを共有できます。基本的な方法としては、のhrefにオブジェクト形式でpathnameとqueryを指定する方法があります。queryには渡したいデータをオブジェクトでまとめて渡すことができ、文字列として渡す方法も状況によって使い分けられます。複数のパラメータを渡したい場合もqueryオブジェクトに複数のキーを持たせることで対応可能です。受け取る側のページでは、useRouterフックを使ってqueryを簡単に取得できるため、動的ルートや複雑な条件にも対応できます。さらに、動的ルート（[id].jsの形式）と組み合わせることで、URLの構造をより直感的に設計でき、ユーザーごとの詳細ページや検索結果ページなど、柔軟なルーティングが可能になります。ただし、クエリパラメータはURLに直接表示されるため、個人情報やセキュリティに関わる情報は避け、必要に応じてstate管理やサーバーサイドでの処理と組み合わせることが推奨されます。これらのポイントを押さえることで、Next.jsでのリンク操作やページ遷移がより安全で効率的になり、ユーザー体験の向上に繋がります。

サンプルプログラムまとめ


import Link from "next/link";
import { useRouter } from "next/router";

export default function Home() {
  const userId = 101;
  const router = useRouter();

  return (
    <div>
      <h1>Next.js Linkとクエリパラメータまとめ</h1>
      
      <h2>基本のリンク</h2>
      <Link href="/about">Aboutページへ</Link>
      
      <h2>オブジェクト形式でパラメータ渡し</h2>
      <Link href={{ pathname: "/profile", query: { id: userId } }}>
        プロフィールを見る
      </Link>
      
      <h2>複数パラメータの渡し方</h2>
      <Link href={{ pathname: "/search", query: { keyword: "Next.js", page: 2 } }}>
        検索結果を見る
      </Link>
      
      <h2>動的ルートとの組み合わせ</h2>
      <Link href={{ pathname: "/user/[id]", query: { id: 202, ref: "home" } }}>
        ユーザー202を見る
      </Link>
    </div>
  );
}