feat: ThemeProvider 수정

- BAILOUT_TO_CLIENT_SIDE_RENDERING 수정
yujiseok · Jan 18, 2025 · d3dfe23 · d3dfe23
1 parent 650e72b
commit d3dfe23
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 22 deletions.
diff --git a/app/components/provider.tsx b/app/components/provider.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,9 +4,9 @@ import type { Metadata } from "next";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { GoogleAnalytics } from "@next/third-parties/google";
-import ThemeProviders from "@/app/components/provider";
 import Navbar from "@/app/components/navbar";
 import Footer from "@/app/components/footer";
+import { ThemeProvider } from "next-themes";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -49,15 +49,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="ko" className={`${geistSans.variable} antialiased`}>
+    <html
+      lang="ko"
+      className={`${geistSans.variable} antialiased`}
+      suppressHydrationWarning
+    >
       <body className="mx-2 flex flex-col bg-neutral-50 transition-colors ease-out delay-50 dark:bg-neutral-800">
-        <ThemeProviders>
+        <ThemeProvider attribute="class">
           <Navbar />
           <main className="mx-auto mt-14 w-full max-w-3xl px-4">
             {children}
           </main>
           <Footer />
-        </ThemeProviders>
+        </ThemeProvider>
         <Analytics />
         <SpeedInsights />