Erreur d'hydratation React dans Next.js - "Le code HTML du serveur devrait contenir la balise <a> correspondant à la balise <a>"

Question

Je travaille sur un projet Next.js, mais je reçois toujours une erreur d'hydratation. Le message d'erreur spécifique que j'ai vu était :

Erreur : l'hydratation a échoué car l'interface utilisateur initiale ne correspond pas à ce qui est rendu lors du rendu côté serveur.

Attention : la correspondance <div> est attendue dans le code HTML du serveur.

Je comprends que cela peut être dû à une inadéquation entre le HTML du rendu côté serveur (SSR) et le HTML généré par React lors de l'hydratation côté client. Avertissement : une balise <div> était attendue dans le code HTML rendu par le serveur, mais elle n'a pas été trouvée.

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 (
    
      
        
          
             Item 1
          
        
        
           Item 2
        
        
           Item 3
        
        
           Item 4
        
      
    
  );
};

export default Home;

Comment corriger cette erreur dans NextJS 13 ?

Answer 1

Le problème est causé par les composants de Next.js. Je l'ai corrigé en remplaçant le composant par une balise <a>

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

Cela force une actualisation complète de la page lorsque vous cliquez sur le lien, plutôt que d'activer la navigation côté client comme le fait ce composant. Veuillez noter qu'il s'agit d'une solution de contournement qui peut avoir un impact sur les performances en raison du rechargement des pages.