Next.jsのLinkコンポーネントの使い方を初心者向けに解説！Next.jsルーティング入門

Next.jsのLinkコンポーネントの使い方

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

生徒

「Next.jsでページを移動するときって、どうやってリンクを作るんですか？」

先生

「Next.jsでは、普通のHTMLのaタグの代わりにコンポーネントを使うのが基本です。」

生徒

「普通のaタグとどう違うんですか？」

先生

「Next.jsのはページを切り替えるときに、ページ全体を再読み込みせずに移動できるんです。だから高速でスムーズな画面切り替えが可能です。」

生徒

「なるほど！具体的な使い方を教えてください。」

先生

「では、実際にコードを見ながら解説していきます。」

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

Next.jsのコンポーネントは、ページ間の移動（ルーティング）を簡単に実装できる専用のコンポーネントです。通常のタグと違って、ページ全体を再読み込みせずに表示を切り替えることができます。これにより、ウェブサイトが高速で、ユーザーにとってストレスの少ない操作感になります。

2. 基本的なコンポーネントの書き方

2. 基本的なコンポーネントの書き方

Next.jsではを使う場合、import Link from "next/link"を必ず書きます。簡単な例を見てみましょう。


import Link from "next/link";

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

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

3. aタグとの違い

3. aタグとの違い

通常のHTMLでは Aboutのようにリンクを作ります。しかし、この方法だとページ全体を再読み込みするため、表示が一瞬真っ白になったり、ユーザー体験が少し遅くなります。Next.jsのを使うと、この問題を解消できます。


<Link href="/about">
  <a>Aboutページへ移動</a>
</Link>

（と組み合わせてaタグを使うと、SEOやスタイル適用にも便利です）

4. ボタン風リンクの作り方

リンクをクリックしたときにボタンのように見せたい場合も、とボタン要素を組み合わせて簡単に作れます。


import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>ホームページ</h1>
      <Link href="/contact">
        <button>お問い合わせページへ</button>
      </Link>
    </div>
  );
}

（ボタンをクリックすると/contactページに移動します。ページの再読み込みは発生しません）

5. 外部リンクと内部リンクの使い分け

Next.jsのはサイト内のページ移動に使います。外部サイトに移動する場合は通常のタグを使います。


// 内部リンク
<Link href="/about">Aboutページへ</Link>

// 外部リンク
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  外部サイトへ
</a>

（外部リンクはではなく、通常のaタグを使うことで、新しいタブで開くことができます）

6. Linkコンポーネントでパラメータを渡す方法

Next.jsでは、リンク先にパラメータを渡すこともできます。例えば、ユーザーIDを渡す場合は下記のように書きます。


import Link from "next/link";

export default function Home() {
  const userId = 123;
  return (
    <div>
      <h1>ユーザーページ</h1>
      <Link href={`/user/${userId}`}>ユーザー詳細ページへ</Link>
    </div>
  );
}

（画面に「ユーザーページ」と表示され、クリックすると/user/123ページに移動します）

7. Linkコンポーネントでのスタイルの付け方

リンクにスタイルをつけたい場合は、classNameやスタイルを直接追加できます。Bootstrapのボタン風スタイルも簡単です。


import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>スタイル付きリンク</h1>
      <Link href="/about">
        <a className="btn btn-primary">Aboutページへ</a>
      </Link>
    </div>
  );
}

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

8. Linkと画像の組み合わせ

リンクを画像に設定することも可能です。Next.jsではコンポーネントと組み合わせて使えます。


import Link from "next/link";
import Image from "next/image";
import sampleImg from "../public/sample.jpg";

export default function Home() {
  return (
    <div>
      <h1>画像リンク</h1>
      <Link href="/gallery">
        <a>
          <Image src={sampleImg} alt="サンプル画像" width={200} height={150} />
        </a>
      </Link>
    </div>
  );
}

（画像をクリックすると/galleryページに移動します）

9. Linkコンポーネントを使うときの注意点

Next.jsのを使うときは、必ずhref属性を正しく指定すること、外部サイトはaタグを使うこと、ボタンや画像を組み合わせる場合はaタグで囲むことが大切です。また、SEOを意識してリンクテキストはわかりやすくすることも重要です。

まとめ

本記事では、Next.jsのコンポーネントを使ったページ間移動（ルーティング）の基本から応用まで、初心者向けに詳しく解説しました。Next.jsのを使うと、通常のHTMLのタグとは異なり、ページ全体を再読み込みせずに高速でスムーズな画面切り替えが可能になります。これによりユーザー体験が向上し、サイトのパフォーマンスも最適化されます。また、内部リンクと外部リンクの使い分け、ボタン風リンクや画像リンクの作り方、パラメータを渡す方法など、多様なケースに対応できる知識も身につきました。

Next.jsのコンポーネントは、リンク先の指定やhref属性の設定が非常に重要です。内部ページの移動には、外部サイトへの移動には通常のタグを使用することを忘れないでください。また、SEOやアクセシビリティを意識してリンクテキストをわかりやすくし、ユーザーがリンク先を予測できるようにすることが大切です。さらに、Bootstrapを活用することで、ボタン風リンクやカード内リンクなど視覚的にわかりやすく整ったデザインも実現できます。

リンクにスタイルを適用したり、画像と組み合わせたり、パラメータを渡すなど応用的な使い方も紹介しました。これにより、Next.jsでのルーティングは単なるページ移動にとどまらず、ユーザー体験やデザインの幅を広げる重要な機能であることが理解できます。ReactやNext.jsの基礎を押さえた上でを活用することで、効率的でスムーズなウェブ開発が可能になります。

ここで学んだ知識を活用すれば、例えばボタンを押すと動的にページが切り替わるWebアプリや、画像をクリックするとギャラリーページに移動するサイトも簡単に構築できます。実際にコードを書いて試すことで理解が深まり、Next.jsのルーティングの仕組みやの使い方をしっかり身につけることができます。

サンプルプログラム


import Link from "next/link";

export default function Home() {
  const userId = 42;
  return (
    <div>
      <h1>Next.jsルーティングサンプル</h1>
      <Link href="/about">
        <a className="btn btn-success">Aboutページへ</a>
      </Link>
      <Link href={`/user/${userId}`}>
        <button>ユーザーページへ</button>
      </Link>
    </div>
  );
}