Next.js App Router with i18next translation is not working properly for the client component. It always shows text in the default language.
I have used TranslationsProvider on RootLayout Like This.
export default async function RootLayout({
children,
params: { locale }
}: Readonly<{
children: React.ReactNode;
params:{
locale: string
}
}>) {
const {resources} = await initTranslations(locale, i18nNamespaces);
return (
<html lang={locale}>
<body suppressHydrationWarning={true}>
<SessionProvider>
<TranslationsProvider namespaces={i18nNamespaces} locale={locale} resources={resources}>
{children}
</TranslationsProvider>
</SessionProvider>
</body>
</html>
);
}
My Client Component Code
"use client";
import React from "react";
import { useTranslation } from 'react-i18next';
export default function Settings() {
const { t } = useTranslation();
return (
<form>
<section>
<div className="grid gap-10 grid-cols-1 sm:grid-cols-12">
<div className="sm:col-span-5">
<h2 className="mb-5 font-bold text-black dark:text-white">
{t("settings")}
</h2>
<p>
{t("settings_description_1")}
</p>
<p className="mt-2.5">
{t("settings_description_2")}
</p>
</div>
<div className="sm:col-span-7 p-6 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark">
<h3 className="mb-5 font-bold text-black dark:text-white">
{t("settings_input_heading")}
</h3>
<input type="text" className="w-full border-[1.5px] border-stroke bg-transparent px-5 py-3 font-normal text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" />
<p className="mt-2.5">
{t("settings_input_description")}
</p>
</div>
</div>
</section>
<button type="submit">Submit</button>
</form>
)
}
When I use const { t } = useTranslation(); in my nested Client Component then Translations is not working. It always shows text in the default language. But for the nested Server Component, it is working fine.