【NextJS】Linkコンポーネントにaタグが必要ないらしい

NextJS の Link コンポーネントを勉強していてエラーがでました。

すぐに解決しましたが、備忘録的に記事に起こしておこうと思います

コード

import Link from "next/link";

export default function Home() {
  return (
    <>
      <h1>Home</h1>
      <Link href="/router" as="/dummy-url">
        <a>/router</a>
      </Link>
      <br />
      <a href="/router"></a>
    </>
  );
}

エラー

上記のコードを書いて、npm run dev でサーバを起動し、 http://localhost:3000/ にアクセスすると、画面に ↓ が表示されました

パッと見た感じ、Link コンポーネント内で a タグが使えないようですね

記載されているこの URLにアクセスしてみると、 やっぱり Link 内に a タグがあるのがよくなさそう

もう少し調べてみる

NextJS の公式ドキュメントをもう少し調べてみると、 このページにたどり着きました。

ここを見ると、NextJS 12.2 以降から Link コンポーネント内に a タグが必要なくなったようです。

今回は13.1 を使用しているため、つじつまが合いますね。

対処

原因はわかったので、a タグを外してみます（下記コード参照）

import Link from "next/link";

export default function Home() {
  return (
    <>
      <h1>Home</h1>
      <Link href="/router" as="/dummy-url">
        {/* aタグを外す */}
        /router
      </Link>
      <br />
      <a href="/router"></a>
    </>
  );
}

なおりましたー、よかった

公式ドキュメント見るのは勉強になりますね。