728x90
반응형
- Hydration failed because the initial UI does not match what was rendered on the server
ThemeProvider를 <body> 태그 위에 적용했을 때 발생하는 에러로 body 태그 자식으로 넣어야 한다. - Extra attributes from the server: data-theme,style
html 태그에 suppressHydrationWarning 속성을 작성하지 않았을 때 발생하는 에러.
// app/layout.tsx
import { ThemeProvider } from 'next-themes';
export default function RootLayout({childrenReadonly<{children: React.ReactNode;}>) {
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<ThemeProvider attribute="data-theme">{children}</ThemeProvider>
</body>
</html>
);
}728x90
반응형
'NEXT' 카테고리의 다른 글
| NEXT JS + Google Analytics Connect Setting (0) | 2024.08.07 |
|---|---|
| Parallel Routes Modal Difficult Error (0) | 2024.07.25 |
| NextJs Next-auth getSession() 로그인 정보 확인 (0) | 2024.07.23 |
| NEXT 14 NEXT-AUTH 5 middleware.ts not working (0) | 2024.07.11 |
| NextJS Prisma PostgreSQL 연결 및 Migrate (0) | 2024.07.09 |