ホームページ > 記事 > ウェブフロントエンド > NextJS 15 のインストール時のハイドレーション エラー
NextJS 15 のインストール時のハイドレーション エラー
- DDDオリジナル
- 2024-11-21 22:33:15869ブラウズ
新しい Next 15 プロジェクトを作成した後、
npm run dev
開発サーバーで次のエラーが発生した場合:
サーバーでレンダリングされた HTML がクライアントと一致しないため、ハイドレーションが失敗しました。その結果、このツリーはクライアント上で再生成されます。これは、SSR 化されたクライアント コンポーネントが使用されている場合に発生する可能性があります
- サーバー/クライアント ブランチ if (typeof window !== 'unknown')。
- 呼び出されるたびに変更される 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 か所に集めることができます:
1 - カラージラ
2 - ワッパライザー
3 - 都市型 VPN
4 - ラストパス
5 - ハッカービジョン
6 - WhatFont
7 - HTML ビデオ用のビデオ スピード コントローラー
8 - グロット
9 - AI 文法チェッカー & パラフレーズ – LanguageTool
10 - 文法
11 - 反転
12 - ダッシュレーン
コーディングを楽しんでください:)
以上がNextJS 15 のインストール時のハイドレーション エラーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。