CODEWITHSUNDEEP
javascriptreactjsnext.jschakra-uihydration
Abderrahmen Mhemed
Abderrahmen Mhemed

Reputation: 96

NextJS Hydration Error - Hydration failed

I'm using NextLink with my project to creat links, however it seems using NextLink returns this error Hydration failed because the initial UI does not match what was rendered on the server.

Now upon checking the console this is what i'm getting as error: Expected server HTML to contain a matching <a> in <a>. This doesn't happen when I change to Link .

Here is the code that's making the error:

<Box flex={1} align="right">
      <Box ml={2} display={{ base: 'inline-block', md: 'none' }}>
        <Menu>
          <MenuButton
            as={IconButton}
            icon={<HamburgerIcon />}
            variant="outline"
            aria-label="Options"
          />
          <MenuList>
            <NextLink href="/" passHref>
              <MenuItem as={Link}> About</MenuItem>
            </NextLink>
            <NextLink href="/" passHref>
              <MenuItem as={Link}> Work</MenuItem>
            </NextLink>
          </MenuList>
        </Menu>
      </Box>
    </Box>

Upvotes: 0

Views: 1089

Answers (1)

mrtarikozturk
mrtarikozturk

Reputation: 1

While rendering your application, there was a difference between the React tree that was pre-rendered from the server and the React tree that was rendered during the first render in the browser (hydration).

https://nextjs.org/docs/messages/react-hydration-error

Upvotes: 0

Related Questions