Next.js Linkコンポーネントのv12とv13の書き方の違い

こんにちは。Gaji-Labo 横田です。Next.js の Link コンポーネントは、クライアント側のナビゲーションを提供する React コンポーネントです。Next.js では Linkコンポーネントを使うことでバックグラウンドで自動的にプリフェッチするので、a要素を直接書くより遷移先の表示が高速化されるという利点があります。今日は Next.js v12 と v13 で、 Link コンポーネントの書き方に違いがある点にフォーカスしたいと思います。

Next.js v12 での使い方

v12 では、Link コンポーネント内が文字列（ string）のみであれば、a 要素で自動的にラップしてくれる機能がありました。
例として

<Link href="/nav">
  label
</Link>

こう書くと

<a href="/nav">label</a>

このように a 要素で展開してくれます。
公式のコードを確認すると以下部分で行われていた処理のようです。

// Deprecated. Warning shown by propType check. If the children provided is a string (<Link>example</Link>) we wrap it in an <a> tag 
if (typeof children === 'string') {
      children = ＜a＞{children}＜/a＞
}

しかし、コメントにもあるようにこの機能は v12.1.6 で削除 されていますし、文字列以外を Link コンポーネントに含める時には a 要素でのネストが必要です。

<Link href="/nav">
  <a className={styles.nav}>
      <span>
        label
      </span>
  </a>
</Link>

さらに v12 では Link コンポーネントに直接 class を指定することはできないため、a 要素に class を付与したい時も、a要素をネストさせる必要があります。

// class が渡らない
<Link href="/nav" className={styles.nav}>
 label
</Link>

// class は a 要素で渡す
<Link href="/nav">
  <a className={styles.nav}>
    label
  </a>
</Link>

また、a要素をラップするカスタムコンポーネントを作成する時は、Link に passHref Props を追加して、href の値を渡す必要もあります。

<Link href={href} passHref>
  <CustomLink>label</CustomLink>
</Link>

Next.js v13 以降での使い方

v13 以降では、 a 要素のネストが必要なくなりました。
公式：https://nextjs.org/docs/app/api-reference/components/link

<Link href="/nav">label</Link>

また、a 要素の属性をLink コンポーネントに渡せるようになったため、Link コンポーネントに直接 class の付与も可能です。

Good to know: <a> tag attributes such as className or target=”_blank” can be added to <Link> as props and will be passed to the underlying <a> element.

https://nextjs.org/docs/app/api-reference/components/link

<Link href="/nav" className={styles.nav}>label</Link>

a要素のネストが不要なので、v12 で必要なケースがあった passHref Props も不要になりました。便利。

ちなみに v13 で a要素のネストをすると以下のようなサーバーエラーが起きます。

Server Error
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.

このエラーを解決する方法としては、a要素のネストを外す以外にもありますので、くわしくは公式をご覧ください。

https://nextjs.org/docs/pages/building-your-application/upgrading/codemods#remove-a-tags-from-link-components

終わりに

バージョンごとに書き方が異なるので、公式ドキュメントのこまめなキャッチアップが必要と改めて感じました。
Next.js v12 のプロジェクトを更新する際や、v13 へのバージョンアップをする際の参考になれば幸いです。