Search code examples
next.jsserver-side-renderingi18nextreact-i18nextnext-i18next

Add translation on server side only using next-i18next

Scenario:

  • We have a server that responds to several domains (70+)
  • Each domain has it own language (already in an individual JSON file)
  • I have a map "domain":"translation.json"
  • Each client has a single language: a user visiting "example.com" will see the website in English only. A visitor in "example.es" will see it in Spanish. There are no options to change language of the current site, just link to another domain.

Problem

I don't want to load 70+ translations in the client side because the client will never be able to change it.

How can I apply that map in my NextJS app but not drop the other resources to client?

PS: there is no tag for "next-i18next" here on SO (and there are 2 for nextjs).

Solution

  • Next-i18next has 2 modes,

    1. Server side, it loads the relevant translation file using i18next-node-fs-backend
    2. Client side, it loads the relevant translation file using i18next-xhr-backend.

    That means by default, this lib loads only the relevant language.