SSR (v9)
You should have a look at next-i18next which extends react-i18next to bring it to next.js the easiest way.
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.Both the i18nextProvider and translate hoc 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: Function that will pre-load all namespaces used by your components. Works well with
react-router match functionprops:
- 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
})
});
When using i18next-express-middleware, 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):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 ...
});
Last modified 2yr ago