Closed2023/07/25にクローズ3

Next.js 13でのChakra UIのリンクの使い方

Next.js

React

Chakra UI

Haru 2023/02/15に更新

参照

キーワード

Next.js 13
React 18
Chakra UI
Hydration Error Text content does not match server-rendered HTML.

Haru 2023/02/15

Next.js 12 以前

import NextLink from 'next/link'
import { Link } from '@chakra-ui/react'

<NextLink passHref href="/">
  <Link>
    Top
  </Link>
</NextLink>;

Next.js 13

import NextLink from 'next/link'
import { Link } from '@chakra-ui/react'

<Link as={NextLink} href='/'>
  Top
</Link>

Haru 2023/02/15に更新

なぜ？

Next.js 13では、Linkコンポーネントはa要素を直接描画する。その子要素に別のa要素にすると、下記のようにaタグが二重になってしまう。

<a>
  <a>
  </a>
</a>

// その他の例: p内のdivなど
<p>
  <div></div>
</p>

無効なDOMの構成のため、警告が表示される

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>

Hydration エラーになる。
またReact 17以前だとHydrationが失敗すると警告だったが、React 18からはエラーを発火する。

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <a> in <a>.

このスクラップは2023/07/25にクローズされました