[自分用]Next.jsのLinkについて

なぜLinkを使用するのか

ページ遷移とかなら通常のHTMLのようにaタグで実装できる。
なのになぜLinkを使用するのか。それは、aタグを使用すると共通コンポーネントに関わらずページ全てを更新してしまうから。

例）index.jsとabout.jsの違いはタイトルが「index.jsなのか、それともabout.jsなのか」の違いだけ。
それなのにページ遷移をすると背景色まで変わってしまう。

といった感じで本来は更新してほしくない部分まで更新されてしまう。
さらには全体を更新することにより、パフォーマンス低下の原因にもなってしまう。

Linkの使い方

上記を解決するのがLinkコンポーネント。
使うときはLinkをインポートしてから、Linkタグでaタグを囲うように記述する。

※厳密にはLinkがaタグに置き換わるので本来は記述しなくていいのだが、過去のバージョンではaタグを記述していたことが大きので合わせいる。
2023/05/18現在のバージョンではlegacyBehaviorを記述しないとエラーになる。

aタグを記述しない方法も、公式で定義されているので問題なく使用していいはず。そこはチームで要相談してほしい。

import Link from "next/link"

export finction Header(){
  return(
    <div>
      <Link legacyBehavior href="/about">
        <a>about.js</a>
      </Link>
    </div>
  )
}

こうすることでページ全体ではなく「必要な部分（変更された部分）だけの変更」のみを行うことができるようになった。
またprefetch機能（事前にページを取得する機能）が備わっているため、さらにaタグより良いパフォーマンスができる。