History

Steven 4466ba436b chore(examples): use default prettier for examples/templates (#60530 ) ## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409		2024-01-11 16:01:44 -07:00
..
components	chore(examples): use default prettier for examples/templates (#60530 )	2024-01-11 16:01:44 -07:00
helper	chore(examples): use default prettier for examples/templates (#60530 )	2024-01-11 16:01:44 -07:00
lang	Update with-react-intl example (#28336 )	2021-09-20 02:19:06 +00:00
pages	chore(examples): use default prettier for examples/templates (#60530 )	2024-01-11 16:01:44 -07: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	Add .yarn/install-state.gz to .gitignore (#56637 )	2023-10-18 16:34:48 +00:00
.npmrc	chore: update with-react-intl example (#40999 )	2022-09-30 12:39:51 -07:00
next-env.d.ts	Remove incorrect entries for pnpm debug log (#47241 )	2023-03-26 22:26:05 -07:00
next.config.js	chore(examples): use default prettier for examples/templates (#60530 )	2024-01-11 16:01:44 -07:00
package.json	update @types/react version in examples (#57259 )	2023-10-26 19:52:08 -05:00
README.md	docs(examples): improve DX while copying command to create new project (#38410 )	2022-07-26 21:57:48 -05:00
tsconfig.json	chore: update with-react-intl example (#40999 )	2022-09-30 12:39:51 -07: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, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-react-intl with-react-intl-app

yarn create next-app --example with-react-intl with-react-intl-app

pnpm 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.