React Hydration Error in Next.js - "Expected server HTML to contain a matching <a> in <a>"

Question

I am working on a Next.js project and I keep running into a hydration error. The specific error message I am seeing is:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching in .

I understand this might be caused by a mismatch between server-side rendered (SSR) HTML and the HTML that React generates on the client-side during hydration. The warning suggests that an tag is expected but not found in the server-rendered HTML.

import React from 'react';
import styled from 'styled-components';
import {
  FaIcon1 as Icon1,
  FaIcon2 as Icon2,
  FaIcon3 as Icon3,
  FaIcon4 as Icon4
} from 'react-icons/fa';
import Link from 'next/link';

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ffffff;
`;

const ListItemContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 70%;
  overflow-y: auto;

  @media (min-width: 768px) {
    flex-direction: row;
  }
`;

const ListItem = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px 10px;
  font-size: 1.8em;
  border: 1px solid #299d51;
  border-radius: 5px;
  cursor: pointer;
  color: #14080e;
  transition: background 0.3s;
  width: 50vw;
  min-height: 20vh;
  text-align: center;

  &:hover {
    background: #4cb16b;
  }

  @media (min-width: 768px) {
    width: 20vw;
  }

  svg {
    color: #00722e;
    margin-bottom: 20px;
  }
`;

const Home: React.FC = () => {
  return (
    <Container>
      <ListItemContainer>
        <Link href="/route1">
          <ListItem>
            <Icon1 size={70} />
            Item 1
          </ListItem>
        </Link>
        <ListItem>
          <Icon2 size={70} /> Item 2
        </ListItem>
        <ListItem>
          <Icon3 size={70} /> Item 3
        </ListItem>
        <ListItem>
          <Icon4 size={70} /> Item 4
        </ListItem>
      </ListItemContainer>
    </Container>
  );
};

export default Home;

How to fix this error in NextJS 13?

jouncous · Accepted Answer · 2023-08-04 06:44:46Z

1

The issue was caused by the component from Next.js. I fixed it by replacing the component with a standard tag:

  <a href="/stock">
  <ListItem>
    <Icon1 size={70} />
    Item 1
  </ListItem>
</a>

This forces a full page refresh when the link is clicked, unlike the component which enables client-side navigation. Note that this is a workaround and may impact performance due to the page reload.

answered Aug 4, 2023 at 6:44

jouncous

296 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Hydration Error in Next.js - "Expected server HTML to contain a matching <a> in <a>"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related