Linkとページ遷移

なぜ学ぶか： Next.jsのコードでは、リンクが<a href>ではなく<Link href>で書かれています。見た目はほぼ同じなのに、なぜ？ 例で違いを見てください。

まずはこの例を見てみましょう

import Link from "next/link";

// ✅ アプリ内の移動は Link（必要な部分だけ差し替える → 速い）
<Link href="/blog">ブログ</Link>

// 外部サイトへは普通の a タグでよい
<a href="https://example.com">外部サイト</a>

// ❌ もったいない: アプリ内なのに a タグ（毎回ページ全体を読み直す）
<a href="/blog">ブログ</a>

使い分けは「アプリ内はLink、外部サイトはaタグ」。これだけです。

コード例

import Link from "next/link";

function Nav() {
  return (
    <nav>
      {/* アプリ内の移動は Link（高速・状態が保たれる） */}
      <Link href="/">ホーム</Link>
      <Link href="/blog">ブログ</Link>

      {/* 外部サイトへは普通の a タグでよい */}
      <a href="https://docs.example.com" target="_blank" rel="noreferrer">ドキュメント</a>
    </nav>
  );
}

このlearnアプリのトピック一覧のリンクもLinkで書かれています。ページ移動が速いのはそのためです。