Reagieren Sie auf einen Hydratationsfehler in Next.js – „Erwartetes Server-HTML enthält <a>-Tag, das mit <a>-Tag übereinstimmt“
Ich arbeite an einem Next.js-Projekt, erhalte jedoch ständig einen Hydratationsfehler. Die spezifische Fehlermeldung, die ich sah, war:
Fehler: Die Hydratation ist fehlgeschlagen, da die ursprüngliche Benutzeroberfläche nicht mit dem übereinstimmt, was auf der Serverseite gerendert wird.
Warnung: Es wird ein passender <div> im Server-HTML erwartet.
Ich verstehe, dass dies an einer Diskrepanz zwischen dem serverseitigen Rendering (SSR)-HTML und dem von React während der Hydratation auf der Clientseite generierten HTML liegen kann. Warnung: Ein <div>-Tag wurde im vom Server gerenderten HTML erwartet, aber nicht gefunden.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 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
</icon1></listitem>
<listitem>
<icon2 size="{70}"> Item 2
</icon2></listitem>
<listitem>
<icon3 size="{70}"> Item 3
</icon3></listitem>
<listitem>
<icon4 size="{70}"> Item 4
</icon4></listitem>
</listitemcontainer>
</container>
);
};
export default Home;
|
Wie behebe ich diesen Fehler in NextJS 13?
