valknar/supervisor-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve ThemeProvider SSR issue causing 500 error
All checks were successful
Build and Push Docker Image to Gitea / build-and-push (push) Successful in 1m6s
Details

Browse Source 
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>
This commit is contained in:
Sebastian Krüger
2025-11-23 20:27:44 +01:00
parent 2c3a78056f
commit 3d5e9e36d6
4 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/layout.tsx
View File

@@ -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>

13
components/layout/AppLayout.tsx Normal file
View File

@@ -0,0 +1,13 @@
'use client';
import { ReactNode } from 'react';
import { Navbar } from './Navbar';
export function AppLayout({ children }: { children: ReactNode }) {
return (
<div className="flex min-h-screen">
<Navbar />
<main className="flex-1 container mx-auto px-4 py-8">{children}</main>
</div>
);
}

10
components/layout/Navbar.tsx
View File

@@ -19,14 +19,16 @@ const navItems = [
export function Navbar() {
const pathname = usePathname();
const [mounted, setMounted] = useState(false);
const { theme, setTheme, resolvedTheme } = useTheme();
const themeContext = useTheme();
useEffect(() => {
setMounted(true);
}, []);
const toggleTheme = () => {
setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
if (themeContext) {
themeContext.setTheme(themeContext.resolvedTheme === 'dark' ? 'light' : 'dark');
}
};
return (
@@ -59,14 +61,14 @@ export function Navbar() {
</div>
{/* Theme Toggle */}
{mounted && (
{mounted && themeContext && (
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
aria-label="Toggle theme"
>
{resolvedTheme === 'dark' ? (
{themeContext.resolvedTheme === 'dark' ? (
<Sun className="h-5 w-5" />
) : (
<Moon className="h-5 w-5" />

7
components/providers/ThemeProvider.tsx
View File

@@ -71,7 +71,12 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
export function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within ThemeProvider');
// Return a default context for SSR or when outside provider
return {
theme: 'system' as Theme,
setTheme: () => {},
resolvedTheme: 'light' as 'light' | 'dark',
};
}
return context;
}