split server and client side providers

kantord · kantord · commit 8b136fe270bf · 2025-11-26T14:50:35.000+01:00
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { GlobalProviders } from "@/components/global-providers";
+import { ClientProviders } from "@/components/client-providers";
+import { ServerProviders } from "@/components/server-providers";
 import "./globals.css";
 
 const inter = Inter({
@@ -21,7 +22,9 @@ export default async function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} antialiased`}>
-        <GlobalProviders>{children}</GlobalProviders>
+        <ServerProviders>
+          <ClientProviders>{children}</ClientProviders>
+        </ServerProviders>
       </body>
     </html>
   );
diff --git a/src/components/client-providers.tsx b/src/components/client-providers.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import type { ReactNode } from "react";
+
+interface ClientProvidersProps {
+  children: ReactNode;
+}
+
+export function ClientProviders({ children }: ClientProvidersProps) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}
diff --git a/src/components/global-providers.tsx b/src/components/global-providers.tsx
diff --git a/src/components/server-providers.tsx b/src/components/server-providers.tsx
@@ -0,0 +1,22 @@
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+import type { ReactNode } from "react";
+import { Toaster } from "sonner";
+
+interface ServerProvidersProps {
+  children: ReactNode;
+}
+
+export function ServerProviders({ children }: ServerProvidersProps) {
+  return (
+    <NuqsAdapter>
+      {children}
+      <Toaster
+        richColors
+        duration={2000}
+        position="bottom-right"
+        offset={{ top: 50 }}
+        closeButton
+      />
+    </NuqsAdapter>
+  );
+}
