見出し画像

【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>


では

この記事が気に入ったらサポートをしてみませんか?