mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
449dd29da0
Fixes #5352 . This updates the example updating react-i18next to v8.0.6, replacing the `translate` HOC to `withNamespaces` and `I18n` to `NamespacesConsumer`. There is one thing that I am not sure if is correct or not so I need some guidance. You gotta wrap the page with the `withI18next` HOC so it will extend the `getInitialProps` of the page with this: ``` Extended.getInitialProps = async (ctx) => { const composedInitialProps = ComposedComponent.getInitialProps ? await ComposedComponent.getInitialProps(ctx) : {} const i18nInitialProps = ctx.req ? i18n.getInitialProps(ctx.req, namespaces) : {} return { ...composedInitialProps, ...i18nInitialProps } } ``` The problem lies in `i18n.getInitialProps` that has this code: ``` i18n.getInitialProps = (req, namespaces) => { if (!namespaces) namespaces = i18n.options.defaultNS if (typeof namespaces === 'string') namespaces = [namespaces] req.i18n.toJSON = () => null // do not serialize i18next instance and send to client const initialI18nStore = {} req.i18n.languages.forEach((l) => { initialI18nStore[l] = {} namespaces.forEach((ns) => { initialI18nStore[l][ns] = (req.i18n.services.resourceStore.data[l] || {})[ns] || {} }) }) return { i18n: req.i18n, // use the instance on req - fixed language on request (avoid issues in race conditions with lngs of different users) initialI18nStore, initialLanguage: req.i18n.language } } ``` In my understanding, among other things, it gets the `i18n` object from the request (included by the `server.js`) and uses the data to create `initialI18nStore` and `initialLanguage`, and then return these two objects plus the `i18n` object itself. If you add the `i18n` object on the return, then there will be a crash on the client-side render of the page: ```TypeError: Cannot read property 'ready' of null``` I don't know why, but returning it breaks `NamespacesConsumer` component from `react-i18next` (the state becomes null). So I commented this line and the provider on `_app.js` is getting the `i18n` instance from the `i18n.js` file (the same as `server.js`). I don't know if this would be an issue so I would like help to debug this. |
||
|---|---|---|
| .. | ||
| components | ||
| lib | ||
| locales | ||
| pages | ||
| i18n.js | ||
| package.json | ||
| README.md | ||
| server.js | ||
Internationalization with react-i18next.
How to use
Using create-next-app
Execute create-next-app with Yarn or npx to bootstrap the example:
npx create-next-app --example with-react-i18next with-react-i18next-app
# or
yarn create next-app --example with-react-i18next with-react-i18next-app
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-i18next
cd with-react-i18next
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with now (download)
now
Testing the app
auto detecting user language: http://localhost:3000
german: http://localhost:3000/?lng=de
english: http://localhost:3000/?lng=en
The idea behind the example
This example app shows how to integrate react-i18next with Next.
Plus:
- Routing and separating translations into multiple files (lazy load them on client routing)
- Child components (pure or using translation hoc)
Features of this example app
- Server-side language negotiation
- Full control and usage of i18next on express server using i18next-express-middleware which asserts no async request collisions resulting in wrong language renderings
- Support for save missing features to get untranslated keys automatically created
locales/{lng}/{namespace}.missing.json-> never miss to translate a key - Proper pass down on translations via initialProps
- Taking advantage of multiple translation files including lazy loading on client (no need to load all translations upfront)
- Use express to also serve translations for clientside
- In contrast to react-intl the translations are visible both during development and in production
learn more
Translation features:
Translation management: