fix: move DevToolbar dynamic import to Client Component

ssr: false is not allowed with next/dynamic in Server Components.
Extracted the dynamic() call into DevToolbarLoader.tsx ('use client')
so layout.tsx stays a pure Server Component.
This commit is contained in:
ralksta
2026-03-13 12:28:59 +01:00
parent 33fd31e926
commit 60b86b540f
2 changed files with 16 additions and 7 deletions

View File

@@ -5,7 +5,6 @@
*/
import type { Metadata } from 'next';
import dynamic from 'next/dynamic';
import Link from 'next/link';
import './globals.css';
import { SubpageNav } from '@/components/SubpageNav';
@@ -13,11 +12,8 @@ import { ThemeToggle } from '@/components/ThemeToggle';
import { ScrollToTop } from '@/components/ScrollToTop';
import { Footer } from '@/components/Footer';
import { getConfig, getGoogleFontsUrl, AppConfig } from '@/lib/config';
// Lazy-load DevToolbar — keeps 17KB+ out of the production bundle
const DevToolbar = dynamic(() => import('@/components/DevToolbar').then(m => ({ default: m.DevToolbar })), {
ssr: false,
});
// DevToolbarLoader ist eine Client Component (ssr: false nur dort erlaubt)
import { DevToolbarLoader } from '@/components/DevToolbarLoader';
export async function generateMetadata(): Promise<Metadata> {
const config = getConfig();
@@ -181,7 +177,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<main className="main">{children}</main>
<Footer />
<ScrollToTop />
{process.env.NODE_ENV === 'development' && <DevToolbar />}
{process.env.NODE_ENV === 'development' && <DevToolbarLoader />}
</body>
</html>
);

View File

@@ -0,0 +1,13 @@
'use client';
import dynamic from 'next/dynamic';
// ssr: false ist nur in Client Components erlaubt
const DevToolbar = dynamic(
() => import('@/components/DevToolbar').then(m => ({ default: m.DevToolbar })),
{ ssr: false }
);
export function DevToolbarLoader() {
return <DevToolbar />;
}