1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-react-i18next
Andrew Razumovsky 0d4d7d840a [with-react-i18next] Fix flickering on page change via <Link /> (#4318)
* Fix flickering on page change via <Link />

* Remove process.browser check
2018-05-09 15:06:37 +02:00
..
components Update with-react-i18next example (#3932) 2018-03-05 12:46:13 +01:00
lib [with-react-i18next] Fix flickering on page change via <Link /> (#4318) 2018-05-09 15:06:37 +02:00
locales Update with-react-i18next example (#3932) 2018-03-05 12:46:13 +01:00
pages Update with-react-i18next example (#3932) 2018-03-05 12:46:13 +01:00
i18n.js Update debug flag in with-react-i18next example (#3964) 2018-03-07 09:31:03 +01:00
package.json update with-react-i18next sample with latest dependencies (#3835) 2018-02-18 12:41:40 +01:00
README.md Examples: stabalise README format and create-next-app usage (#4009) 2018-04-03 14:19:05 +02:00
server.js Split exports in with-react-18next example to avoid ambiguity (#3959) 2018-03-07 08:42:14 +01:00

Deploy to now

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 or clone the repo:

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: