NextJS App Router - avoid prop drilling about react-i18next HOT 3 CLOSED

You're talking about app routing and not page routing, so this is not related to next-i18next...
but yes, with this example you need to pass down the lng...
alternatively there is https://github.com/i18next/next-app-dir-i18next-no-locale-path-example but that is also not optimal...
If you have a better idea, feel free to fork this example and modify it to your needs

from react-i18next.

Just added a hint here: i18next/next-app-dir-i18next-example@17ba4b8

from react-i18next.

Thank you for your response. Just to clarify, my issue, or the message where I sought advice, was indeed related to react-i18next and app router, not specifically to next-i18next or page routing. From my understanding I didn't name it next-i18next nor page router, right?

Following your hint, I've identified where the fault was in my "Expected behavior" example. I overlooked removing the async part from the client function, causing Next.js to interpret it as a server component. For anyone encountering a similar issue, the corrected code should work as expected now:

'use client'

import { useTranslation } from "@/i18n/client";
import { useParams } from "next/navigation";

export default function ClientComponent() {
    const params = useParams();
    const { t } = useTranslation(params.locale as string);

    return (
            <div>
                <h1>Client Component</h1>
                <h1>translation: {t("title")}</h1>
            </div>
    );
}

Thank you for your guidance, and I hope this clarification helps others facing similar challenges.

from react-i18next.