<a>タグを入れるとHydration failed〜と表示される

Question

Next.js、React初心者です。
手探りで実装しながら学習をしています。

現在、otoyo/easy-notion-blog: Easy to start your Notion Blog with Official APIを元にブログを作っており、
カスタムしたタグ機能をつけているのですが、
そのUIを組み立てているときにエラーが出てしまいます。

コード

export const PostTags = ({ post }) => {
  const tags = post.Tags_in_color

  const code = (
    <div className="">
      {tags &&
        tags.length > 0 &&
        tags.map((tag) => {
          return (
            <Link
              href="/contents/tag/[tag]"
              as={getTagLink(tag.name)}
              key={tag.name}
              passHref
            >
              <a
                key={tag.name}
                className={`rounded-lg ${Tag_color(
                  tag.color
                )} px-2 py-1 text-white  inline-block w-auto mr-1 mt-1 text-xs`}
              >
                {tag.name}
              </a>
            </Link>
          )
        })}
    </div>
  )

  return code
}

エラー

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Call Stack
throwOnHydrationMismatch
node_modules/react-dom/cjs/react-dom.development.js (14388:0)
tryToClaimNextHydratableInstance
node_modules/react-dom/cjs/react-dom.development.js (14401:0)
updateHostComponent$1
node_modules/react-dom/cjs/react-dom.development.js (20711:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (22447:0)
callCallback
node_modules/react-dom/cjs/react-dom.development.js (4161:0)
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4210:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4274:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27405:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26513:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26422:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26390:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25694:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

<a>を削除することでエラーの解消はできるのですが、
マウスオンでURLが表示されないなど意図した挙動にならないです。
また、「<Link>内に<a>があるからだめなのかな？」と思い、
一度一番外側へと放り出してみましたがだめでした。
囲まなくても、<a>があるだけで同様のエラーが出ます。

やったこと

• パッケージのアップデート
• むちゃくちゃググる
  • 具体的に、「divをspanにしたら治った」「tableにtheadとか入れた」みたいなやり方を見かけましたが、自分のケースに適応することができませんでした。
• 別ファンクションにして渡した

解決したいこと

• <a>タグを失わずにエラーの解消をする

---

よろしくお願いいたします。

Answer 1

自己解決したので解放を記します。

HTMLのルールをチェックし忘れていたがために起こっていた

そういえば、<a>の中に<a>を入れるのは大丈夫なんだろうか？と思いました。
そう、実はこのコードを内包するような形で<a>タグがもう一つあることを思い出して
それを調べてみたら

aタグの中にaタグを書きたい時のtips - Qiita

やっぱり入れ子にしちゃだめでした。

この記事のとおりに実際に<object>で囲んだらエラーが出なくなり、解決しました。

export const PostTags = ({ post }) => {
  const tags = post.Tags_in_color

  const code = (
    <div className="">
      {tags &&
        tags.length > 0 &&
        tags.map((tag) => {
          return (
            <Link
              href="/contents/tag/[tag]"
              as={getTagLink(tag.name)}
              key={tag.name}
              passHref
            >
              <object>
                <a
                  key={tag.name}
                  className={`rounded-lg ${Tag_color(
                    tag.color
                  )} px-2 py-1 text-white  inline-block w-auto mr-1 mt-1 text-xs`}
                >
                  {tag.name}
                </a>
              </object>
            </Link>
          )
        })}
    </div>
  )

  return code
}

お騒がせしました。