Ralat penghidratan tindak balas dalam Next.js - "HTML pelayan dijangka mengandungi teg <a> yang sepadan dengan teg <a>"

Question

Saya sedang mengusahakan projek Next.js, tetapi saya terus mendapat ralat penghidratan. Mesej ralat khusus yang saya lihat ialah:

Ralat: Penghidratan gagal kerana UI awal tidak sepadan dengan apa yang dipaparkan apabila dipaparkan pada bahagian pelayan.

Amaran: Menjangkakan padanan <div>

Saya faham ini mungkin disebabkan oleh ketidakpadanan antara HTML pemaparan sisi pelayan (SSR) dan HTML yang dijana oleh React semasa penghidratan pada bahagian klien. Amaran: Teg <div> dijangka dalam HTML yang diberikan pelayan, tetapi tidak ditemui.

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;

Bagaimana untuk membetulkan ralat ini dalam NextJS 13?

Answer 1

Masalah ini disebabkan oleh komponen Next.js. Saya membetulkannya dengan menggantikan komponen dengan teg <a> standard:

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

Ini memaksa muat semula halaman penuh apabila pautan diklik, dan bukannya mendayakan navigasi sisi klien seperti yang dilakukan oleh komponen ini. Sila ambil perhatian bahawa ini adalah penyelesaian dan mungkin memberi kesan kepada prestasi disebabkan pemuatan semula halaman.