Next.js Discord

Discord Forum

Problem with nextjs and react i18next or next i18next

Unanswered
Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
Hello guys I've tried using react-i18next and next-i18next with nextjs v16 but none of my translations besides english are working for some reason. I have the translations in a monorepo that are shared between the mobile and web projects. The prints are from the root folder and the translations folder the structure of each language is exactly the same, folders, json files and keys, the only difference is the translations, but for some reason I am not getting the translations for languages other than english. In my web project root folder I have this i18n.config.ts:
import { locales } from "@translations/index";

export const i18nConfig = {
  locales,
  defaultLocale: "pt-br",
  prefixDefault: true,
};

I have set the default locale to pt-br to force other translation that is not english, but in the browser instead of the translation I get the keys that are used in the json, in the root of the web project I have a ./src/proxy.ts:
import { i18nRouter } from "next-i18n-router";
import { i18nConfig } from "../i18n.config";
import { NextRequest } from "next/server";

export function proxy(request: NextRequest) {
  return i18nRouter(request, i18nConfig);
}

export const config = {
  matcher: "/((?!api|static|.*\\..*|_next).*)",
};

there is also a bit of configuration on the main layout and a translation client provider which I do not think is relevant right now because the translations are not working server or client side

1 Reply

Barbary LionOP
and also ./src/app/i18n.ts:
import { Resource, createInstance, i18n } from "i18next";
import { initReactI18next } from "react-i18next/initReactI18next";
import resourcesToBackend from "i18next-resources-to-backend";
import { i18nConfig } from "../../i18n.config";

export default async function initTranslations(
  locale: string,
  namespaces: string[],
  i18nInstance?: i18n | undefined,
  resources?: Resource | undefined,
) {
  i18nInstance = i18nInstance || createInstance();
  i18nInstance.use(initReactI18next);

  if (!resources) {
    i18nInstance.use(
      resourcesToBackend(
        (language: string, namespace: string) =>
          import(
            `../../../../translations/${locale ?? language}/${
              namespace.includes("_")
                ? namespace.replaceAll("_", "/")
                : namespace
            }/index.json`
          ),
      ),
    );
  }

  await i18nInstance.init({
    fallbackLng: i18nConfig.defaultLocale,
    supportedLngs: i18nConfig.locales,
    lng: locale,
    resources,
    defaultNS: namespaces[0],
    fallbackNS: namespaces[0],
    ns: namespaces,
    preload: resources ? [] : i18nConfig.locales,
  });

  await i18nInstance.loadNamespaces(namespaces);

  return {
    i18n: i18nInstance,
    resources: i18nInstance.services.resourceStore.data,
    t: i18nInstance.t,
    namespaces,
  };
}