目的

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

使用技術

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

import Link from 'next/link'

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

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

import Link from 'next/link'

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

たとえば、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コンポーネントを多用しているプロジェクトだったら
このエラーを解決するのめっちゃ大変じゃん、と思いましたね。笑