
Photo by
makicome
【IT】Next.jsでのaタグ エラー
皆さま
こんにちは
Next.jsでLinkコンポーネントを使用の際に
aタグをネストしておりましたが、
新しいプロジェクトで使用際に以下の様なエラーとなりました。
簡単ですが対応の忘備録です。
エラー画面

ソースコード(訂正前)
<Link href="/testlink" prefetch={false}>
<a className="my-3 text-xs"> testlink</a>
</Link>
Next.jsのバージョン13からaタブのネストは不要となったようです。
対応方法は2つとなります。
パターンA:legacyBehaviorを追加
<Link href="/testlink" prefetch={false} legacyBehavior>
<a className="my-3 text-xs"> testlink-a</a>
</Link>
パターンB :aタブを使用しない
<Link href="/testlink" prefetch={false} className="my-3 text-xs">
testlink-b
</Link>
では