streaper2/afrov2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement DynamicProviders to disable SSR for global context providers in root layout

Browse Source
This commit is contained in:
streaper2
2026-05-06 20:47:29 +02:00
parent 19b405d9f2
commit bb464cf1c5
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import nextDynamic from 'next/dynamic'; // <-- 1. On importe l'outil dynamique
import { DynamicProviders } from '../components/DynamicProviders';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import { getSiteSettings } from '../lib/settings';
@@ -7,8 +7,7 @@ import { Metadata } from 'next';
import { Inter, Playfair_Display } from 'next/font/google';
import './globals.css';
// 2. LA MAGIE EST ICI : On force Next.js a ignorer les Providers pendant le build serveur
const Providers = nextDynamic(() => import('../components/Providers').then((mod) => mod.Providers), { ssr: false });
// 2. LA MAGIE EST ICI : On utilise un wrapper Client pour le no-SSR
const inter = Inter({
@@ -57,13 +56,13 @@ export default async function RootLayout({ children }: { children: React.ReactNo
return (
<html lang="fr" className={`${inter.variable} ${playfair.variable}`} style={devBrandOverride} suppressHydrationWarning>
<body className="bg-gray-50 text-gray-900 antialiased min-h-screen flex flex-col font-sans" suppressHydrationWarning>
<Providers>
<DynamicProviders>
<Navbar settings={settings} />
<main className="flex-grow">
{children}
</main>
<Footer settings={settings} />
</Providers>
</DynamicProviders>
</body>
</html>
);

14
components/DynamicProviders.tsx Normal file
View File

@@ -0,0 +1,14 @@
"use client";
import React from 'react';
import dynamic from 'next/dynamic';
// On importe les Providers reellement en mode Client-Only (pas de SSR)
const Providers = dynamic(
() => import('./Providers').then((mod) => mod.Providers),
{ ssr: false }
);
export function DynamicProviders({ children }: { children: React.ReactNode }) {
return <Providers>{children}</Providers>;
}