安裝 NextJS 15 時出現水合錯誤
- DDD原創
- 2024-11-21 22:33:15957瀏覽
建立新的下一個 15 個項目後
npm run dev
如果在您的開發伺服器中看到這些錯誤：
水合失敗，因為伺服器呈現的 HTML 與客戶端不符。結果，這棵樹將在客戶端上重新生成。如果使用 SSR 用戶端元件
，就會發生這種情況- 伺服器/客戶端分支 if (typeof window !== 'undefined').
- 變數輸入，例如 Date.now() 或 Math.random()，每次呼叫時都會改變。
- 使用者區域設定中的日期格式與伺服器不符。
- 外部更改數據，無需將其快照與 HTML 一起發送。
- 無效的 HTML 標籤巢狀。
如果客戶端安裝了瀏覽器擴展，該擴展在 React 加載之前與 HTML 發生混亂，也可能會發生這種情況。
在此處查看更多：https://nextjs.org/docs/messages/react-Hydration-error
這是解決方案
在您的layout.tsx檔案中使用這個suppressHydrationWarning屬性
return (
<html lang='en' suppressHydrationWarning>
如果這不能解決您的問題，那麼到目前為止，這些是我在這裡看到的導致水合錯誤的提到的擴展。你們可以添加更多名稱，將它們聚集在一個地方，以幫助其他開發人員：
1 - ColorZilla
2 - Wappalyzer
3 - 城市 VPN
4 - LastPass
5 - 駭客願景
6 - WhatFont
7 - HTML 影片的視訊速度控制器
8 - 格洛特
9 - AI 語法檢查器和釋義器 – 語言工具
10 - 文法
11 - 反轉
12 - 達什蘭
快樂編碼:)
以上是安裝 NextJS 15 時出現水合錯誤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn