How to Dynamically Load Translations with react-i18next Using a Nested Folder Structure?

[iamyahia]

Hey remix-i18next team, I'm sorry for posting this here. I didn't find any resource to ask except StackOverflow, and I'm really urgently looking for an answer to my question.
I'd be grateful if you share your experience with me to fix my case.

I'm working on a project which we're using react-i18next remix-spa for localization, and I want to organize my translation files in the following folder structure:

/locales
  ├── /pages
  │   ├── /index
  │   │   ├── en.json
  │   │   ├── fr.json
  │   │   └── ar.json
  │   ├── /about
  │   │   ├── en.json
  │   │   ├── fr.json
  │   │   └── ar.json
  ├── en.json
  ├── fr.json
  └── ar.json

What I'm Trying to Achieve:

1. it's so clean to understand

My Current Attempt:

Here's the code I currently have:

import i18n, { use } from "i18next";
import Backend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

const currentPage = "index"; // Replace this dynamically based on the current route

use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: false,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
    },
    ns: [currentPage], // Use page name as namespace
    defaultNS: currentPage, // Default namespace for the page
  });

export default i18n;

I tried to use loadPath like below but I don't know how to tell the dynamic folder inside /pages

backend: {
      loadPath: "/locales/pages/{dynamic}/{{lng}}/{{lng}}.json",
    },

Any help would be greatly appreciated! Thank you in advance!

[sergiodxa]

This is more a question for i18next itself as loading the translation files is outside remix-i18next scope (that's responsibility of your backend)

From what I understand you have language and locale, there's no way to add another dynamic value so you can do locales/pages-index/en.json or locales/pages-about/fr.json but both pages and the page name should be in the same namespace value.