NextJS 15 설치 시 수화 오류
- DDD원래의
- 2024-11-21 22:33:15869검색
새로운 넥스트 15 프로젝트를 생성한 후
npm run dev
개발 서버에서 다음 오류가 표시되는 경우:
서버에서 렌더링한 HTML이 클라이언트와 일치하지 않아 하이드레이션에 실패했습니다. 결과적으로 이 트리는 클라이언트에서 다시 생성됩니다. SSR이 적용된 클라이언트 구성 요소를 사용하는 경우 이런 일이 발생할 수 있습니다
- 서버/클라이언트 브랜치(창 유형 !== '정의되지 않음').
- 호출될 때마다 변경되는 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 - 와팔라이저
3 - 도시형 VPN
4 - LastPass
5 - 해커 비전
6 - WhatFont
7 - HTML 비디오용 비디오 속도 컨트롤러
8 - 글롯
9 - AI 문법 검사기 및 구문 분석기 – LanguageTool
10 - 문법
11 - 반전
12 - Dashlane
즐거운 코딩하세요 :)
위 내용은 NextJS 15 설치 시 수화 오류의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.