You are trying to use a client component onin a server componentscomponent.
Add "use client" at the top of your layout.
Or alternatively, create a new file Providers.tsx :
"use client" import {I18nextProvider} from 'react-i18next'; import i18next from "@/../i18n"; export function Providers({ children }: { children: React.ReactNode }) { return <I18nextProvider i18n={i18next}>{children}</I18nextProvider>; } And in your layout
import { Providers } from "./Providers"; export default function RootLayout({children}: { children: React.ReactNode }) { const requestHeaders = headers(); const locale = requestHeaders.get('accept-language')?.split(',')[0].slice(0, 2) || 'va'; i18next.changeLanguage(locale); return ( <Providers> <html lang={locale}> <body> <Suspense fallback={<Spinner/>}> <Header/> <div style={{width: '80%', minHeight: '60vh', margin: '0 auto'}}> {children} </div> <Footer/> </Suspense> </body> </html> </Providers> ); }