인프런 커뮤니티 질문&답변
작성한 질문수
소스 수정 후 자동 컴파일 문의드립니다.
작성
·
253
1
1.3 NextJS 설치 편에서
다크모드 설정하는 부분에서 문의드립니다.
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
설정 후, 영상에서는 dark, light로 수정하면 반영되는것을 확인할 수 있는데 제 코드에서는
Warning: Extra attributes from the server: class,style
그리고
Warning: Prop className did not match. Server: "__className_aaf875 vsc-initialized" Client: "__className_aaf875"
라는 워닝이 발생하여 자동적으로 반영되지 않는 것을 확인했습니다.
해당 이슈를 수정할 수 있는 방법이 있을까요 ?
답변 2
0
0
+추가) 제가 설명이 부족했네요.
1.강의의 버전이 아니라, 최신 버전으로 진행하시는 분들은 hydration 오류가 발생할 수 있습니다. CSS 미스매치 이슈로 next15 에서 발생하는 hydration 경고를 supress 하라는 답변이 있었지만. 25년 7월 23일 기준 최신버전을 사용하시면 문제 없을것 같습니다.
warning message이며 당장은 개발하는데 큰 이슈는 없을것으로 예상됩니다. 다만 개발 서버에서 변경사항이 제대로 먹지 않을것 같네요.
nextjs에서 일부 변경사항은 서버 재시작을 해야될 수 있습니다.
.next 파일 ( .으로 시작하고 next 파일, 즉 빌드가 캐시된 파일을 지워주세요.) 제거
next를 다시 시작해보기.
강의와 다른 버전은 package.json을 참고해서 맞추어 보기 ( 최신버전에서 발생하는 버그일 수 있습니다.)
이 부분은 shadcn ui 설치 단계에서 자동으로 넣어주고 있습니다.
현재 버전에서 강의랑 다르게 동작하는 부분이 있는지 검토해보겠습니다.
*계속 문제가 된다면 아래 순서로 진행 부탁드립니다.!
0.https://ui.shadcn.com/docs/installation/next
1.https://ui.shadcn.com/docs/theming
2.https://ui.shadcn.com/docs/dark-mode/next