6.Linkコンポーネント

NextJS

prefetch

ブラウザがリンク先のページを事前に取得してキャッシュに保存する機能のことです

ユーザーがリンクをクリックする前に、次のページのデータを先読みするため、ページ遷移の速度が向上します

Next.jsでLinkコンポーネントを使うと、デフォルトでプリフェッチが有効になっています

Linkコンポーネントの使い方

index.js
import Link from 'next/link';
<Link href="/about">会社情報</Link>

src/
  pages/
    index.js
    about.js

href属性には「相対パス」ではなく「絶対パス」を指定すること

ホーム画面への遷移ならhref=”/”が正しいです

(href=”../index”は間違っています)

BACK