「Error: Invalidwith child. Please remove or use . Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor」というエラーが発生した時の対処方法

2024年2月23日

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位１位を約50件獲得(2023年6月時点)。

こんにちは、しのです。

React/Next.jsを勉強していますがタイトルのエラーが出て困っています。解決方法を教えてください。

本日は上記のお悩みを解決します。

しの

こういった記事に長々とした前置きは不要！

早速見ていきましょう！

Error: Invalidwith child. Please remove or use . Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor　というエラーが出た場合の対処方法

早速ですが、対処方法は以下となります。

・<Link>タグ内のaタグを削除する

・<Link>タグにLegacyBehaviorを追加する

そもそもエラーが出るコード

こちらが表題のエラーが出るコードのサンプルとなります。

import Link from "next/link";

export default function Nav(){
    return(
        <nav>
            <ul>
                <li>
                    <Link href="/" >
                        <a>HOME<a>
                    </Link>
                </li>
                <li>
                    <Link href="/about">
                    <a>ABOUT</a>
                    </Link>
                </li>
                <li>
                    <Link href="/blog">
                     <a>BLOG</a>
                    </Link>
                </li>
            </ul>
        </nav>
    )
}

<Link>タグ内のaタグを削除した場合のコード

import Link from "next/link";

export default function Nav(){
    return(
        <nav>
            <ul>
                <li>
                    <Link href="/" >
                        HOME
                    </Link>
                </li>
                <li>
                    <Link href="/about">
                    ABOUT
                    </Link>
                </li>
                <li>
                    <Link href="/blog">
                     BLOG
                    </Link>
                </li>
            </ul>
        </nav>
    )
}

上記のように<aタグ>を削除することでもエラーが解消するはずです。

<Link>タグにLegacyBehaviorを追加した場合のコード

次に<Link>タグにLegacyBehaviorを追加した場合のコードです。

import Link from "next/link";

export default function Nav(){
    return(
        <nav>
            <ul>
                <li>
                    <Link href="/" LegacyBehavior>
                        <a>HOME<a>
                    </Link>
                </li>
                <li>
                    <Link href="/about" LegacyBehavior>
                    <a>ABOUT</a>
                    </Link>
                </li>
                <li>
                    <Link href="/blog" LegacyBehavior>
                     <a>BLOG</a>
                    </Link>
                </li>
            </ul>
        </nav>
    )
}

このように記述することでも解決するはずです。

そもそもなぜエラーが出るの？

疑問を持つ人

書いてる本通りにコードを書いたのになんでエラーが出るの？

Next.jsはバージョン12.2までは<Link>タグ内に<a>タグを設置する必要があったのですが、12.2以降は<a>タグが不要になったからです。

しの

こちらのNext.jsの公式ドキュメントにも記載があるのでよかったら参考にしてみてください。

書籍はこういったアップデート前の情報が載っている可能性があるため注意が必要ですね。

しの

というわけで本日の記事は以上です！