fix: resolve ThemeProvider SSR issue causing 500 error

The app was crashing with "useTheme must be used within ThemeProvider" error during server-side rendering. Changes: - Created AppLayout client component to wrap Navbar - Modified useTheme hook to return default values during SSR instead of throwing an error - Updated Navbar to safely handle theme context - Moved Navbar rendering into client-side only AppLayout This fixes the SSR hydration mismatch and allows the app to render correctly on both server and client. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 20:27:44 +01:00
parent 2c3a78056f
commit 3d5e9e36d6
4 changed files with 27 additions and 8 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { Providers } from '@/components/providers/Providers';
-import { Navbar } from '@/components/layout/Navbar';
+import { AppLayout } from '@/components/layout/AppLayout';

 const inter = Inter({
  subsets: ['latin'],
@@ -44,8 +44,7 @@ export default function RootLayout({
      </head>
      <body className={`${inter.variable} antialiased`}>
        <Providers>
-          <Navbar />
-          <main className="container mx-auto px-4 py-8">{children}</main>
+          <AppLayout>{children}</AppLayout>
        </Providers>
      </body>
    </html>