Next.js Linkコンポーネントの使い方を初心者向けに徹底解説！Next.jsでページ遷移を簡単に実装する方法

Next.js Linkコンポーネントとは？基本の使い方を解説

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

生徒

「Next.jsでページを移動させる方法ってありますか？」

先生

「はい、Next.jsではというコンポーネントを使って簡単にページ遷移ができます。」

生徒

「Linkって、普通のHTMLのタグとどう違うんですか？」

先生

「HTMLのタグでもページ遷移できますが、Linkを使うとNext.jsの仕組みでページの読み込みが速くなったり、ユーザー体験が向上します。」

生徒

「なるほど！具体的にはどのように書くんですか？」

先生

「それでは、基本の使い方から順番に見ていきましょう！」

1. Next.jsのLinkコンポーネントとは？

Next.jsのコンポーネントは、Reactのコンポーネントとして提供されるページ遷移用のタグです。通常のHTMLのタグと同じように使えますが、Next.jsはを使うことで、クライアントサイドでページを読み込むため、ページの遷移が高速になります。つまり、ユーザーがクリックしたときにページ全体を再読み込みせず、必要な部分だけを更新してスムーズに表示できます。

2. 基本的なLinkの使い方

まずは簡単な例での基本的な使い方を見てみましょう。


import Link from "next/link";

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

export default Home;

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

3. Linkコンポーネントにスタイルを適用する

Linkは通常のタグのようにclassNameを使ってスタイルを付けることができます。


import Link from "next/link";

function Home() {
  return (
    <div>
      <h1>ホームページ</h1>
      <Link href="/about">
        <a className="btn btn-primary">Aboutページへ</a>
      </Link>
    </div>
  );
}

export default Home;

（リンクがボタン風に表示され、クリックするとAboutページに移動します）

4. Linkの中で文字列だけでなく要素を使う

Linkの中には文字列だけでなく、画像やアイコンなどの要素も入れることができます。


import Link from "next/link";

function Home() {
  return (
    <div>
      <h1>ホームページ</h1>
      <Link href="/contact">
        <div style={{border: "1px solid black", padding: "10px"}}>
          Contactページへ
        </div>
      </Link>
    </div>
  );
}

export default Home;

（囲い付きのボックスが表示され、クリックするとContactページに移動します）

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

Next.jsではを使って、ページにパラメータを渡すこともできます。


import Link from "next/link";

function Home() {
  return (
    <div>
      <h1>ホームページ</h1>
      <Link href={{ pathname: "/profile", query: { id: 123 } }}>
        プロフィールページへ
      </Link>
    </div>
  );
}

export default Home;

（クリックすると/profile?id=123のページに移動し、パラメータを受け取ることができます）

6. Linkとルーティングの組み合わせで便利にページ遷移

Linkを使うことで、Next.jsのルーティングと組み合わせたページ遷移が簡単になります。例えばナビゲーションメニューを作る場合、Linkで各ページにスムーズに移動できます。


import Link from "next/link";

function Navbar() {
  return (
    <nav>
      <Link href="/">ホーム</Link> | 
      <Link href="/about">About</Link> | 
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

export default Navbar;

（ナビゲーションバーが表示され、クリックすると各ページに高速に移動します）

7. Linkを使う際の注意点

Linkの中でタグをネストして使うとエラーになる場合があります。Next.js 13以降ではだけで完結させるか、aタグにclassNameやスタイルを付ける場合はの中に直接置くようにしましょう。また、外部リンクの場合はではなく通常のタグを使用します。

8. Linkコンポーネントを使うメリットまとめ

Linkを使うことで、ページ遷移が高速になりユーザー体験が向上します。また、クエリパラメータの受け渡しやスタイルのカスタマイズも簡単に行えます。ナビゲーションやボタンなど、様々な場面で活用できるので、Next.jsでのWeb開発には必須のコンポーネントです。

まとめ

本記事では、Next.jsにおけるコンポーネントの基本的な使い方から、スタイルの適用方法、要素やクエリパラメータを渡す応用的な使い方まで詳しく解説しました。Next.jsのは、従来のHTMLのタグとは異なり、クライアントサイドでページ遷移を行うため、ページ全体を再読み込みすることなくスムーズにコンテンツを表示できます。これによりユーザー体験が格段に向上し、特にナビゲーションバーやボタンリンクのような頻繁に利用される遷移において、その効果は顕著です。また、LinkコンポーネントはReactコンポーネントとして扱えるため、classNameやstyleを用いたデザインのカスタマイズも容易で、サイト全体の統一感を保ちながら柔軟なUI構築が可能です。

さらに、Linkを使用することで、ページ間でのクエリパラメータの受け渡しや、リンク内にテキストだけでなく画像やアイコン、囲み要素を入れることもできるため、よりリッチなUIを簡単に実現できます。Next.js 13以降ではコンポーネントの使用方法に若干の変更があるものの、基本的な概念は変わらず、外部リンク以外の内部遷移において最も推奨される方法です。これにより、WebサイトやWebアプリケーションのレスポンス速度を向上させつつ、SEOにおいてもページ遷移のスムーズさが評価されやすく、ユーザーが快適にコンテンツを閲覧できるようになります。

実際のサンプルコードを通して、コンポーネントの基本から応用までを確認しました。例えば、ナビゲーションメニューを作成する場合、以下のようにLinkを活用することで、各ページへの遷移が高速でスムーズになります。


import Link from "next/link";

function Navbar() {
  return (
    <nav className="d-flex gap-3 p-2">
      <Link href="/" className="btn btn-outline-primary">ホーム</Link>
      <Link href="/about" className="btn btn-outline-success">About</Link>
      <Link href="/contact" className="btn btn-outline-info">Contact</Link>
    </nav>
  );
}

export default Navbar;