archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-react-intl
History
Luc Leray f52955ec94
Clean up examples package.json (#27121) 
Clean up package.json files in the `examples` directory:
- Add `private: true`
- Remove `version` (because they are irrelevant for packages that are not meant to be published)
- Remove `name` (because they are optional for packages that are not meant to be published, and when someone clones an example, they often rename it and the property becomes stale)
- Remove `author`
- Remove `description`
- Remove `license`

Also remove `with-dynamic-app-layout` example completely, since it does the same as `layout-component` (https://github.com/vercel/next.js/pull/27121#discussion_r668178408).

## Documentation / Examples

- [x] Make sure the linting passes
2021-07-12 19:58:03 +00:00
..
.vscode feat: upgrade react-intl workflow in example (#16215) 2020-08-27 22:59:33 +00:00
components feat: upgrade react-intl workflow in example (#16215) 2020-08-27 22:59:33 +00:00
lang chore(with-react-intl): allow extracting translation key from a deeper directory (#23874) 2021-04-19 22:04:49 -05:00
pages [Example] with-react-intl: fix doubling messages (#17175) 2020-09-21 03:47:58 +00:00
.babelrc Include all files in Prettier (#17050) 2020-09-14 02:53:19 +00:00
.gitignore feat: upgrade react-intl workflow in example (#16215) 2020-08-27 22:59:33 +00:00
next-env.d.ts feat: upgrade react-intl workflow in example (#16215) 2020-08-27 22:59:33 +00:00
package.json Clean up examples package.json (#27121) 2021-07-12 19:58:03 +00:00
polyfills.ts feat: upgrade react-intl workflow in example (#16215) 2020-08-27 22:59:33 +00:00
README.md Fix deploy buttons URLs (#20834) 2021-01-07 01:40:29 +00:00
server.ts fix: fix hashing algo and locale value hydration (#16692) 2020-09-01 01:33:24 +00:00
tsconfig.json feat: upgrade react-intl workflow in example (#16215) 2020-08-27 22:59:33 +00:00
tsconfig.server.json feat: upgrade react-intl workflow in example (#16215) 2020-08-27 22:59:33 +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

  • Server-side language negotiation
  • React Intl locale data loading via pages/_document.js customization
  • 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-react-intl for performance
  • Translation management via build script and customized Next server

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 build script. 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 French and refresh the page to see the UI update accordingly.