next-themes Hydration failed Error

arkhyeon 2024. 5. 31. 09:48

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