Zenn
Open3

ChakraとNext.jsのLink混用によるHydration failed

Next.js
Chakra UI
shunshun

以下のようなエラーが発生したのでメモ

Error: Hydration failed because the initial UI does not match what was rendered on the server. というエラーメッセージ。React18からエラーが出るようになったらしい。

shunshun

以下のようにChakraのLinkタグとNext.jsのLinkタグを混ぜると発生した。

import NextLink from "next/link";
import {
  LinkBox,
  LinkOverlay,
} from "@chakra-ui/react";

const Header = () => {
  return (
    <Flex>
      <LinkBox>
        <NextLink href={"/"} passHref>
          <LinkOverlay>
           hoge
          </LinkOverlay>
        </NextLink>
      </LinkBox>
    </Flex>
  );
};

export default Header;
shunshun

解決策は以下のように as="span"を加えるだけ。

<Flex>
      <LinkBox as="span">  {/* ここを編集 */}
        <NextLink href={"/"} passHref>
          <LinkOverlay as="span">  {/* ここを編集 */}
           hoge
          </LinkOverlay>
        </NextLink>
      </LinkBox>
</Flex>