react-i18next documentation
🏠 i18next🌐 localization as a service🎓 i18next crash course💾 GitHub Repository
  • Introduction
  • Getting started
  • Guides
    • Drawbacks of other i18n solutions
    • Quick start
    • Multiple Translation Files
    • Extracting translations
  • latest
    • Step by step guide
    • i18next instance
    • useTranslation (hook)
    • withTranslation (HOC)
    • Translation (render prop)
    • Trans Component
    • I18nextProvider
    • SSR (additional components)
    • Migrating v9 to v10
    • TypeScript
  • Misc
    • Using with ICU format
    • Using with fluent format
    • Testing
  • legacy v9
    • Step by step guide (v9)
    • Overview (v9)
    • i18next instance (v9)
    • I18nextProvider (v9)
    • withI18n (v9)
    • withNamespaces (v9)
    • NamespacesConsumer (v9)
    • Trans Component (v9)
    • Interpolate (v9)
    • SSR (v9)
  • 🌐localization as a service
  • 🎓i18next crash course
  • 💾GitHub Repository
Powered by GitBook
On this page
  • Using next.js?
  • Samples
  • Pass language and translations down to client
  • loadNamespaces helper
  • use the i18next-express-middleware
  1. legacy v9

SSR (v9)

Last updated 9 months ago

Using next.js?

You should have a look at which extends react-i18next to bring it to next.js the easiest way.

Samples

To learn more you should have a look at our samples:

The usage of the reactI18nextModule for holding the i18n instance is not a valid option (the instance would be set globally). Always use the I18nextProvider like done in the samples above.

For further information see this .

Pass language and translations down to client

Both the and allow to pass in initialI18nStore and initialLanguage. By doing so the translations won't be loaded and initial clientside render will avoid any flickering or rerender by checksum mismatch.

For details check the docs of those components or have a look at the examples above.

loadNamespaces helper

loadNamespaces: Function that will pre-load all namespaces used by your components. Works well with react-router match function

props:

  • components: Components that need to have namespaces loaded.

  • i18n: the i18n instance to load translations into

import { I18nextProvider, loadNamespaces } from 'react-i18next';
import { match } from 'react-router';

match({...matchArguments}, (error, redirectLocation, renderProps) => {
   loadNamespaces({ ...renderProps, i18n: i18nInstance })
   .then(()=>{
      // All i18n namespaces required to render this route are loaded   
   })
});

use the i18next-express-middleware

import { I18nextProvider } from 'react-i18next';
import i18n from './i18next'; // your own initialized i18next instance
import App from './app';

app.use((req, res) => {
   const component = (
      <I18nextProvider i18n={req.i18n}>
         <App />
      </I18nextProvider>
   );

   // render as desired now ...
});

When using , you can use req.i18n as the i18next instance for I18nextProvider it will assert no request conflicts happen (each request gets it's cloned instance of i18next):

next-i18next
razzle (sample provided by react-i18next)
simpleblack's boilerplate
issue
i18nextProvider
translate hoc
i18next-express-middleware