Next-i18next: Add app base path config to get translation resource in browser

[RonnyVo]

Is your feature request related to a problem? Please describe.

My scenario is I installed nextjs app in an subdirectory domain, e.g: www.example.com/my-app, the translation in server load OK but then in browser, when I switch to language, they will load the translation resource in www.example.com/static/locales which should be www.example.com/my-app/static/locales and cannot find a translation resource.

Describe the solution you'd like

I would like to have a configuration about app base path so you will build the resource url
Something like {appBaseUrl: 'www.example.com/my-app', localePath: 'static/locales'}, and the resource url in json will be like www.example.com/my-app/static/locales/...
Here is what I found in default-config.js, the "/" will wrong in website with subdirectory

config.backend = {
    loadPath: "/".concat(LOCALE_PATH, "/").concat(LOCALE_STRUCTURE, ".json"),
    addPath: "/".concat(LOCALE_PATH, "/").concat(LOCALE_STRUCTURE, ".missing.json")
  };

[isaachinman]

This is fully achievable with current config options. I know this because we're running several apps like this in production. You do indeed need to modify your config.backend.load path:

const NextI18NextInstance = new NextI18Next({
  backend: {
    loadPath: `/my-app/static/locales/{{lng}}/{{ns}}.json`,
  },
});

[RonnyVo]

Thanks. That's correct!

[vanskins]

@isaachinman , but on first load of the app translation is not showing. Example I have two translations en and it, then if I refresh the browser with en on as language it is not showing but when I switch to it it translates but if I switch back to en it does not translate.

[artze]

@vanskins

I observed the same issue on my end. I got it working with the following:

  backend: {
    loadPath: function(lng, ns) {
      if (typeof window == "undefined") {
        return path.resolve(`./public/locales/${lng}/${ns}.json`);
      } else {
        return `/prefix/locales/${lng}/${ns}.json`;
      }
    }
  }

From what I can tell, it looks like the lib looks for translation from either filesystem (if server-side rendered) or through an xhr call. Both are configured in the same loadPath field.

+++

Some other observations: if i have debug: true set, and have my loadPath set to the following (only setting the xhr call path), I got string of errors telling me file not found at /prefix/locales/lng/ns.json, which brought me to the solution above.

  backend: {
    loadPath: function(lng, ns) {
        return `/prefix/locales/${lng}/${ns}.json`;
    }
  }

[ghassenchaar96]

When I modify the config option to be like this :

module.exports = new NextI18Next({
  keySeparator: false,
  backend: {
    loadPath: `****.s3.eu-west-3.amazonaws.com/fr-FR.json`,
  },
});

it doesn't seem that my config is taken into consideration because the error says that no ns has been found on /public/static/locales/en/common.json (which is the default config and not the custom one)

Here's the log:
error - Error: Default namespace not found at /public/static/locales/en/common.json at createConfig (/Users/ghassen/Documents/hiveway/dev/mondaycar-app/node_modules/next-i18next/dist/commonjs/config/create-config.js:117:19) at new NextI18Next (/Users/ghassen/Documents/hiveway/dev/mondaycar-app/node_modules/next-i18next/dist/commonjs/index.js:57:48) at eval (webpack-internal:///./i18n.js:5:18) at Object../i18n.js (/Users/ghassen/Documents/hiveway/dev/mondaycar-app/.next/server/pages/_app.js:1468:1) at __webpack_require__ (/Users/ghassen/Documents/hiveway/dev/mondaycar-app/.next/server/pages/_app.js:23:31) at eval (webpack-internal:///./pages/_app.js:25:64) at Module../pages/_app.js (/Users/ghassen/Documents/hiveway/dev/mondaycar-app/.next/server/pages/_app.js:1822:1) at __webpack_require__ (/Users/ghassen/Documents/hiveway/dev/mondaycar-app/.next/server/pages/_app.js:23:31) at Object.0 (/Users/ghassen/Documents/hiveway/dev/mondaycar-app/.next/server/pages/_app.js:2000:18) at __webpack_require__ (/Users/ghassen/Documents/hiveway/dev/mondaycar-app/.next/server/pages/_app.js:23:31)

Any help would much appreciated !

Another question:
Does the path structure have to be /locales/${lng}/${ns}.json on the S3 bucket to work ? Or it can be like mine ${S3_BUCKET_URL}/fr-FR.json

[eunsukimme]

@artze you saved my time. It works for me!

[sw3214]

@isaachinman, @artze, @RonnyVo, @isaachinman, @eunsukimme I apologize if this is a new topic, but seems sufficiently similar to ask in this thread. If this question belongs elsewhere, please advise.

Big picture: would like to add backend additional bundles of language packs similar to the following:

module.exports = new NextI18Next({
  otherLanguages: ['de'],
  localeSubpaths,
  localePath: path.resolve('./public/static/locales'),
  backend: {
    loadPath: `./public/static/locales/{{lng}}/{{ns}}.json`,
    addPath: `/locales/add/{{lng}}/{{ns}}.json`,
  },
})

This seems something similar as OP was asking originally in that I would like to be able to use the "addPath" backend feature, and from looking at the docs it seems like backend options should be pushed down to the backend, however, I have been unsuccessful in doing so. I have tried every permutation of paths combinations that I can think of, but it doesn't seem to recognize the json files in the additional resources paths that I have defined.

Also, I tried to

• put localizations in public/static/locales/add
• put localizations in public/add/locales

but that didn't work either.

I forked the project and prepared a couple of examples which didn't work here:

 https://github.com/sw3214/next-i18next/tree/example/addPath/examples/simple

Any ideas on what I am missing to get the additional resources in either ./public/add/locales or ./public/static/locales/add to be used for translation? Any help is greatly appreciated! :-)

[sw3214]

Apologies the previous push to github for the example code was missing the content for the additional-page.json files. Example translation file content json content updated. Sorry about that.

[sw3214]

Update. Using @artze's solution as follows for loadPath worked, but still having trouble with addPath I updated an example project here (https://github.com/sw3214/next-i18next/tree/example/addPath2/examples/simple) which takes the Simple Example, and tries to add some localizations in with addPath. Note that if the footer gets loaded with the real footer text rather than the localization key description, then that means the addPath worked.

I appreciate any help that can be provided. This seems like one missing piece which I just don't understand and can not get straight in my head. Apologies in advance if this is all newbie stuff. This is my first attempt at learning how to localize projects.

module.exports = new NextI18Next({
  otherLanguages: ['de'],
  localeSubpaths,
  localePath: path.resolve('./public/static/locales'),

  //   derivative of @artze solution, updated to match the simple project locales folder structure.
  backend: {
    loadPath: function(lng, ns) {
      if (typeof window == "undefined") {
        // return path.resolve(`./public/locales/${lng}/${ns}.json`);
        return path.resolve(`./public/static/locales/${lng}/${ns}.json`);
      } else {
        return `/locales/${lng}/${ns}.json`;
      }
    },

    // ----
    // These "addPath" options don't actually add the path...
    // Trying to figure out how to make the paths available.
    // ----
    addPath: function(lng, ns) {
      if (typeof window == "undefined") {
        // return path.resolve(`./public/locales/${lng}/${ns}.json`);
        return path.resolve(`./public/static/locales/add/${lng}/${ns}.json`);
      } else {
        return `/locales/add/${lng}/${ns}.json`;
      }
    },
  }
})