dev 에서 돌릴 때 theme-provider 사용시 console에 에러가 찍힌다.
build 로 돌리면 에러 찍히지 않음.
class, style attribute를 하드코딩<html
style={{ colorScheme: "light" }}
className={`${noto_sans.className} light`}
>
// 이하
app router를 사용할 때의 hydration issue 가 원인임Next.js 13 appDir support · Issue #152 · pacocoursey/next-themes
suppressHydrationWarning 을 추가해서 warning을 눌러주기만 하면 됨.<aside> 🍪 hydration 에러란? Hydration errors occur when React tries to attach event handlers and manage the state of a component that doesn't match the initial rendering.
</aside>
return (
<html suppressHydrationWarning>
<body className={noto_sans.className}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<Navbar />
<Sidebar>{children}</Sidebar>
</ThemeProvider>
</body>
</html>
);