Linkとプリフェッチ
a タグでも移れるが、遅い
ページが増えたら、次は行き来する道です。素朴に考えると a タグで足ります。
<a href="/items">商品一覧</a>これでも /items は開きます。ただし、ブラウザはページを丸ごと読み直します。HTML を取り直し、JavaScript を取り直し、画面が一度白くなってから組み立て直します。せっかく1つのアプリとして動いているのに、リンクを踏むたびに最初からやり直すことになります。
next/link は、必要なところだけ差し替える
Next.js の Link を使うと、ページ全体は読み直さず、変わる部分だけを描き直します。
import Link from "next/link";
<Link href="/items">商品一覧</Link>書き方は a タグとほとんど同じで、href を渡すだけです。実際に画面に出るのも a タグなので、新しいタブで開く操作も、右クリックからのリンクのコピーも、これまでどおり効きます。検索エンジンからもふつうのリンクとして読めます。
先読みが効いている
Link にはもう1つ役目があります。リンクが画面に入った時点で、その行き先を先に取っておくことです。これをプリフェッチと呼びます。
受講生が画面をながめている数秒のあいだに、Next.js は /items の中身を裏で取り終えています。だから実際にクリックしたときには、待ち時間がほとんどありません。速く感じるのは、通信が速いからではなく、押す前に済ませてあるからです。
先読みは自動なので、こちらで書くことはありません。ただし外部サイトへのリンクには効きませんし、そもそも Link を使う相手はアプリの中の URL だけです。外に出るリンクは素の a タグのままで構いません。
演習
ナビゲーションを Link にします。