← Next.js コース
4. Link — ページ間の移動
ページ間の移動には、a タグの代わりに next/link の Link コンポーネントを使います。書き方は a タグとほぼ同じで、href に移動先のパスを渡すだけです。
Link を使うとページ全体を読み込み直さずに必要な部分だけを差し替えるので、移動が速く、アプリらしい滑らかな操作感になります。さらに画面内に Link が表示された時点で移動先を裏で先読みしてくれるため、クリック時にはすでに準備ができています。
サイト内の移動はすべて Link、外部サイトへのリンクだけ a タグ、と使い分けるのが基本です。サイト内なのに a タグを使うとページ全体がリロードされ、せっかくの速さが失われます。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import Link from "next/link";
export default function Nav() {
return (
<nav>
<Link href="/">ホーム</Link>
<Link href="/about">About</Link>
{/* 外部サイトは通常の a タグでよい */}
<a href="https://example.com">外部サイト</a>
</nav>
);
}