Heim >Web-Frontend >js-Tutorial >Hydratationsfehler bei der Installation von NextJS 15

Hydratationsfehler bei der Installation von NextJS 15

DDD
DDDOriginal
2024-11-21 22:33:15952Durchsuche

Nach dem Erstellen eines neuen nächsten 15-Projekts und

npm run dev

Wenn dieser Fehler auf Ihrem Entwicklungsserver auftritt:

Hydration error when installing NextJS 15

Hydration error when installing NextJS 15

Die Hydratation ist fehlgeschlagen, weil der vom Server gerenderte HTML-Code nicht mit dem des Clients übereinstimmte. Als Ergebnis wird dieser Baum auf dem Client neu generiert. Dies kann passieren, wenn eine SSR-ed-Client-Komponente verwendet wird

  • Ein Server/Client-Zweig, wenn (Typ des Fensters !== 'undefiniert').
  • Variableneingabe wie Date.now() oder Math.random(), die sich bei jedem Aufruf ändert.
  • Datumsformatierung im Gebietsschema eines Benutzers, das nicht mit dem Server übereinstimmt.
  • Externe sich ändernde Daten, ohne einen Schnappschuss davon zusammen mit dem HTML zu senden.
  • Ungültige HTML-Tag-Verschachtelung.

Es kann auch passieren, wenn auf dem Client eine Browsererweiterung installiert ist, die den HTML-Code stört, bevor React geladen wird.

Weitere Informationen finden Sie hier: https://nextjs.org/docs/messages/react-hydration-error

Hier ist die Lösung

Verwenden Sie dieses Attribut suppressHydrationWarning in Ihrer Datei „layout.tsx“

return (
    <html lang='en' suppressHydrationWarning>

Wenn dies Ihr Problem nicht löst, dann sind dies die genannten Erweiterungen, die Flüssigkeitszufuhrfehler verursachen, die ich hier gesehen habe. Ihr könnt weitere Namen hinzufügen, um sie an einem einzigen Ort zu sammeln und anderen Entwicklerkollegen zu helfen:

1 - ColorZilla

2 - Wappalyzer

3 – Urban VPN

4 – LastPass

5 – Hacker-Vision

6 - WhatFont

7 – Videogeschwindigkeitsregler für HTML-Videos

8 - Glot

9 – KI-Grammatikprüfung und Paraphrasierung – LanguageTool

10 – Grammatik

11 – Invertieren

12 – Dashlane

Viel Spaß beim Codieren :)

Das obige ist der detaillierte Inhalt vonHydratationsfehler bei der Installation von NextJS 15. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn