archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-react-intl
History
Henrik Wenz 6124e7d20c
Update with-react-intl example (#28336) 
This PR implements Internationalized Routing using formatjs / react-intl.

## Changelog

- Updated formatjs to latest version
- Remove  deprecated babel-react-intl-plugin in favor of babel-formatjs-plugin
- Remove server in favour of Internationalized Routing
- Added linter with formatjs rules
- Refactored JSX
- Added missing types
- Auto run formtjs script via before hooks
- Adjusted readme docs
- Added message descriptions
- Removed default configs



fixes #27870

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes
2021-09-20 02:19:06 +00:00
..
.vscode feat: upgrade react-intl workflow in example (#16215) 2020-08-27 22:59:33 +00:00
components Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00
helper Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00
lang Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00
pages Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00
.babelrc Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00
.eslintrc Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00
.gitignore feat: upgrade react-intl workflow in example (#16215) 2020-08-27 22:59:33 +00:00
next-env.d.ts next-env.d.ts note in templates (#27983) 2021-08-12 20:36:53 +00:00
next.config.js Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00
package.json Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00
README.md Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00
tsconfig.json Update with-react-intl example (#28336) 2021-09-20 02:19:06 +00:00

README.md

Example app with React Intl

This example app shows how to integrate React Intl with Next.js.

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-react-intl with-react-intl-app
# or
yarn create next-app --example with-react-intl with-react-intl-app

Deploy it to the cloud with Vercel (Documentation).

Features of this example app

  • React Intl integration with custom App component
  • <IntlProvider> creation with locale, messages props
  • Default message extraction via @formatjs/cli integration
  • Pre-compile messages into AST with babel-plugin-formatjs for performance
  • Translation management

Translation Management

This app stores translations and default strings in the lang/ dir. The default messages (en.json in this example app) is also generated by the following script.

$ npm run i18n:extract

This file can then be sent to a translation service to perform localization for the other locales the app should support.

The translated messages files that exist at lang/*.json are only used during production, and are automatically provided to the <IntlProvider>. During development the defaultMessages defined in the source code are used. To prepare the example app for localization and production run the build script and start the server in production mode:

$ npm run build
$ npm start

You can then switch your browser's language preferences to German or French and refresh the page to see the UI update accordingly.