aタグがあるのに、なぜLinkを使うの？

HTMLで別のページへのリンクを作るときは、 aタグを使います。

<a href="/blog/">
  ブログを見る
</a>

ところが、Next.jsのサンプルコードでは 次のように書かれています。

import Link from "next/link";

<Link href="/blog">
  ブログを見る
</Link>

画面上ではよく似ていますが、 Next.jsのサイト内でページを移動するときは、 Linkを使うことで Next.jsのナビゲーション機能を利用できます。

HTMLのaタグとは？

aタグは、 HTMLでリンクを作るための要素です。

aは「anchor」の頭文字で、 別のページやWebサイト、メールアドレス、 電話番号、ページ内の位置などへリンクできます。

基本的な書き方

<a href="/about/">
  私たちについて
</a>

hrefには、 クリックしたときの移動先を指定します。

Next.jsのLinkとは？

Linkは、 Next.jsが提供するReactコンポーネントです。

HTMLのaタグの働きをもとにしながら、 Next.jsのルーティングと連携したページ移動を提供します。

最初にimportする

import Link from "next/link";

JSX内にLinkを書く

export default function Navigation() {
  return (
    <nav>
      <Link href="/">
        トップ
      </Link>

      <Link href="/blog">
        ブログ
      </Link>
    </nav>
  );
}

App Routerでは、 Linkの中へ別のaタグを追加する必要はありません。

<Link href="/blog">
  <a>ブログ</a>
</Link>

<Link href="/blog">
  ブログ
</Link>

aタグとLinkの大きな違い

どちらも最終的にはリンクとして表示されますが、 Next.jsのサイト内を移動するときの処理に違いがあります。

ページ全体の再読み込みとは？

通常のaタグで別ページへ移動すると、 ブラウザーは移動先のURLへ新しくアクセスします。

その結果、 ページのHTMLや必要なファイルを読み込み直します。

別のWebサイトへ移動する場合は、 この通常のナビゲーションが自然です。

一方、同じNext.jsサイト内での移動では、 毎回すべてを読み直さずに済む仕組みが用意されています。

クライアントサイド遷移とは？

Next.jsのLinkを使ったサイト内移動では、 ブラウザー上で必要な部分を切り替える クライアントサイド遷移を利用できます。

共通レイアウトを保ちながら、 移動先に必要な内容を切り替えられるため、 ページ移動が滑らかに感じられます。

Linkのプリフェッチとは？

プリフェッチとは、 ユーザーが移動する可能性のあるページを あらかじめ準備しておく仕組みです。

Linkが画面に近づいたときなどに、 Next.jsが移動先のルートを先に読み込んでおくことで、 クリック後の待ち時間を短くできます。

基本的な使用では、 開発者がプリフェッチ用の処理を毎回書く必要はありません。

サイト内リンクではLinkを使う

同じNext.jsサイト内の別ページへ移動するときは、 基本的にLinkを使用します。

import Link from "next/link";

export default function Header() {
  return (
    <header>
      <nav>
        <Link href="/">
          トップ
        </Link>

        <Link href="/company">
          会社情報
        </Link>

        <Link href="/blog">
          ブログ
        </Link>

        <Link href="/contact">
          お問い合わせ
        </Link>
      </nav>
    </header>
  );
}

ヘッダー、パンくずリスト、記事カード、 前後の記事リンクなど、 サイト内の多くの場所で使用できます。

動的な記事URLへリンクする

microCMSの記事一覧では、 記事ごとに異なるIDやslugを使って 詳細ページへのURLを作ります。

import Link from "next/link";

type Props = {
  article: {
    id: string;
    title: string;
  };
};

export default function ArticleCard({
  article,
}: Props) {
  return (
    <article>
      <h2>{article.title}</h2>

      <Link href={`/blog/${article.id}`}>
        記事を読む
      </Link>
    </article>
  );
}

テンプレートリテラルを使い、 article.idをURLへ組み込んでいます。

外部サイトではどちらを使う？

自分のNext.jsサイトとは別のWebサイトへ移動する場合は、 通常のaタグを使うと目的が分かりやすくなります。

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

メール・電話・ページ内リンク

すべてのリンクをLinkへ置き換える必要はありません。

メールアプリや電話アプリを開くリンクには、 HTMLのaタグを使います。

メールリンク

<a href="mailto:info@example.com">
  メールで問い合わせる
</a>

電話リンク

<a href="tel:0312345678">
  03-1234-5678
</a>

同じページ内の見出しへ移動

<a href="#summary">
  まとめへ移動
</a>

<section id="summary">
  <h2>まとめ</h2>
</section>

Linkをボタン風に見せる方法

Linkはリンクなので、 見た目をボタンにしたい場合でも HTMLのbutton要素を中へ入れる必要はありません。

<Link
  href="/contact"
  className="contact-link"
>
  お問い合わせ
</Link>

.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  color: #fff;
  background: #8c6d7f;
  border-radius: 999px;
  text-decoration: none;
}

画面上はボタンのように見えても、 役割がページ移動であればリンクとして実装します。

リンクを作るときの注意点

リンク先が分かる文字にする

<Link href="/blog">
  こちら
</Link>

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

「こちら」だけでは、 リンクだけを読んだときに移動先を判断しにくくなります。

新しいタブで開くことが分かるようにする

<a
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  公式サイトを見る
  <span>（新しいタブで開きます）</span>
</a>

画像だけのリンクには意味を持たせる

<Link href={`/blog/${article.id}`}>
  <Image
    src={article.eyecatch.url}
    alt={`${article.title}の記事を読む`}
    width={800}
    height={500}
  />
</Link>

よくあるつまずき

import Link from "next/link";

// 基本はLinkだけで書く
<Link href="/blog">
  ブログを見る
</Link>

href="/blog/${article.id}"

href={`/blog/${article.id}`}