SSR (additional components)

i18next localization as a service Find your translator

Search…

Using Next.js?
You should have a look at next-i18next which extends react-i18next to bring it to next.js the easiest way.
With [email protected] and Next.js v10, next-i18next has done a major rewrite of the package, leveraging the built-in internationalized routing provided by Next.js.
​Here you can also find a next-i18next app example in combination with locize, that offers 2 different approaches.
[email protected] supports Next.js v9.5 in Serverless mode (as of July 2020). If your goal is to use earlier versions of Next.js with Serverless, then you should have a look at "Next Right Now", which is a Next.js 9 boilerplate with built-in i18next, react-i18next and Locize.

Using SSG / next export?
Here you'll find a simple tutorial on how to best use next-i18next in a SSG environment.
​
​​
Setting the i18next instance based on req
Use the I18nextProvider to inject the i18next instance bound to the http i18n instance on the request object using i18next-http-middleware.
1
<I18nextProvider i18n={req.i18n}>
2
  <App />
3
</I18nextProvider>
Copied!
Passing initial translations / initial language down to client
To avoid asynchronous loading of translation on the client side (and the possible Suspense out of that) you will need to pass down initialLanguage (will call changeLanguage on i18next) and initialI18nStore (will prefill translations in i18next store).
using the useSSR hook
1
import React from 'react';
2
import { useSSR } from 'react-i18next';
3
​
4
export function InitSSR({ initialI18nStore, initialLanguage }) {
5
  useSSR(initialI18nStore, initialLanguage);
6
​
7
  return <App />
8
}
Copied!
using the withSSR HOC
1
import React from 'react';
2
import { withSSR } from 'react-i18next';
3
import App from './App';
4
​
5
const ExtendedApp = withSSR()(App);
6
​
7
<ExtendedApp initialLanguage={} initialI18nStore={} />
Copied!
The ExtendedApp in this case will also have the composed ExtendedApp.getInitialProps()

Last modified 27d ago

Copy link

Contents

Using Next.js?

Setting the i18next instance based on req

Passing initial translations / initial language down to client

using the useSSR hook

using the withSSR HOC