Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hydratationsfehler bei der Installation von NextJS 15

Hydratationsfehler bei der Installation von NextJS 15

DDD
Freigeben： 2024-11-21 22:33:15
Original
950 Leute haben es durchsucht

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

npm run dev
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle：dev.to
Vorheriger Artikel：Wie erhalte ich eine Liste von Event-Handlern, die an ein jQuery-Element gebunden sind? Nächster Artikel：Können Sie mit getElementById() Elemente mit doppelten IDs abrufen?
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2287
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2423
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
2038
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1920
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1994
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage