Next.js 13 から next/link の Linkコンポーネント が 常に aタグをレンダリングするようになったので共有します

目的

Next.js 12 と 13 で Linkコンポーネントの実装方法が変化したよ、のお知らせ

使用技術

• "next": "13.0.5",
• "react": "18.2.0",
• "react-dom": "18.2.0",

Next.js 12 までの Linkコンポーネント

Next.js 12まではaタグを常にネストしないといけなかった

import Link from 'next/link'

// Next.js 12まではaタグを常にネストしないといけなかった
<Link href="/about">
  <a>About</a>
</Link>

Next.js 13 の Linkコンポーネント

Next.js 13以降は aタグ をネストしなくて良くなった

import Link from 'next/link'

<Link href="/about">
  About
</Link>

なので、Next.jsのLinkコンポーネントにpassHref属性を付与するのはどんな時なのか調べてみたでまとめたようなLinkコンポーネントの実装方法はNext13の場合は必要なくなりますね。そもそもLinkコンポーネントの子供にaタグをネストするケースがなくなるので。

Next.js12から13に変更する時の注意点

たとえば、Next.js13で開発しているプロジェクトがあるとします。

そこであなたは Next.js12までの
Linkコンポーネントの書き方でコンポーネント実装を行いました。

そうすると Hydration Error と validateDOMNesting Error が出現することになります。

Hydration Error

validateDOMNesting Error

↑のようなエラーが出現する理由は「aタグの子供にaタグをネストする書き方はダメだよ。それはHTMLのタグの入れ子構造のルールに反しているから」なので、Next.js13のLinkコンポーネントの書き方に変更したら2つのエラーを同時に解決することができます！

さいごに

Next.js12 から Next.js13 にバージョンアップするときに
Linkコンポーネントを多用しているプロジェクトだったら
このエラーを解決するのめっちゃ大変じゃん、と思いましたね。笑

参考文献

Next.js Blog | next/link