Next.js 13系で <Link> with <a> or use <Link legacyBehavior> エラーの解決方法

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！

今回は、Next.js 13系で、Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>のエラーが表示されたときの解決方法について、説明していきます。

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>のエラーとは？

Next.jsを12系から、13系にUpdateしたところ、次のような Errorが発生しました。

注目してもらいたいのは、赤文字のErrorメッセージの箇所で、
<a> タグを削除するか、<Link legacyBehavior> を使用してください。
と言っています。

Unhandled Runtime Error
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

解決方法: <a>タグ削除 or legacyBehaviorを使用する

今回のエラーの原因は、Next.js13系では、'next/link' の Linkタグは、aタグを内包する必要がなくなったのに、12系までの<a>タグを内包する記述になっているからです。

https://zenn.dev/k_kazukiiiiii/articles/5e8a72ec1a5d27

Next.js 13系以降では、<a>タグ削除するか、legacyBehaviorを使用するか、どちらかの対応をします。

対応の手順は、次のとおり。

1. まずは、Errorの発生源である Next.js の 'next/link'をVSCodeでキーワード検索します。

• 'next/link'を使用しているファイルが一覧でわかります。

sample.tsx

// どちらかのパターンで、importしているはず。
import Link from 'next/link';
import NextLink from 'next/link';

2. <a>タグが必要ない場合は削除する。

sample.tsx

import NextLink from 'next/link';

export const Logo = () => {
  return (
    <NextLink href={'/v4/dashboard'}>
      <img
        className='w-full bg-assets-black px-1 py-0.5'
        src='/images/logo.png'
      />
    </NextLink>
  );
};

3. classをつけるなど、<a>タグが必要な場合はlegacyBehaviorを使用する。

sample.tsx

import Link from 'next/link';
import { useRouter } from 'next/router';

type Props<T> = {
  menu: T;
};

export const Menu = <
  T extends Readonly<
    { title: string; path: string; children?: Readonly<string[]> }[]
  >,
>({
  menu,
}: Props<T>) => {
  const pathname = useRouter().pathname;

  return (
    <div className='flex items-center space-x-4'>
      {menu.map((_menu) => (
        <Link legacyBehavior href={_menu.path} key={_menu.path}>
          <a
            className={`border-r-[1px] border-assets-gray pr-4 text-base last:border-none ${
              pathname === _menu.path || _menu.children?.includes(pathname)
                ? 'font-bold text-assets-black'
                : 'font-normal text-assets-gray hover:opacity-70'
            } `}
          >
            {_menu.title}
          </a>
        </Link>
      ))}
    </div>
  );
};

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

エンジニア視点での我が社のおすすめポイント

1. フルリモート・フルフレックスの働きやすい環境！
   • 前の会社でアサインしてた現場は、フル出社だったので、ありがたすぎる。。。
   • もうフル出社には、戻れなくなります！
2. 経験豊富なエンジニアの先輩方
   • 私は、3年目の駆け出しエンジニアなので、これが、かなりありがたいです！
3. 自社開発とR&D(受託開発)を両方している会社なので、経験できる技術が多い。
   • 自社のProduct開発と、他社からの受託案件で、いろいろな技術を学ぶことができます。
4. AI関連の最新の技術に触れられるチャンスが多い。
   • 自社で特許を持つほど、AI技術に強い会社で、プロファイリングを得意とした技術体系があります。
   • ChatGPTを自社アプリに搭載など、AIトレンドも、もちろん追っており、最新の技術に触れられるチャンスが多いです。
5. たまに、札幌ラボ(東京から札幌) or 東京オフィス(札幌から東京)に出張で行ける！
   • 東京と、札幌に2拠点ある会社なので、会合などで集まる際に、出張で行けます。

採用技術 (一部抜粋)

• FrontEnd: TypeScript, JavaScript, React.js, Vue.js, Next.js, Nuxt.js など
• BackEnd: Node.js, Express,Python など
• その他技術: Docker, AWS, Git, GitHub など

エントリー方法

1. 私達と東京か札幌で一緒に働ける仲間を募集しています。
   詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

Webエンジニア向け説明

https://www.wantedly.com/projects/1089410

データサイエンティスト向け説明

https://www.wantedly.com/projects/1089406

人事に直通(?)・ご紹介Plan(リファラル採用)

私経由で、ご紹介もできますので、興味のある方や気軽にどんな会社なのか知りたい方は、X(旧:Twitter)にて、DMを送ってくれても大丈夫です。
https://twitter.com/masanyon1212