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:
@@ -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>
|
||||
);
|
||||
|
||||
13
components/DevToolbarLoader.tsx
Normal file
13
components/DevToolbarLoader.tsx
Normal 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 />;
|
||||
}
|
||||
Reference in New Issue
Block a user