【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>
    </>
  );
}

import Link from "next/link";

export default function Home() {

return (

<a>/router</a>

</Link>

<br />

</>

);

}

エラー

上記のコードを書いて、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>
    </>
  );
}