66597be8a7
### Reason for making this change https://yarnpkg.com/getting-started/qa#:~:text=yarn%2Finstall%2Dstate.,your%20workspaces%20all%20over%20again. In the official documentation of `yarn`, it is stated that `.yarn/install-state.gz` is an optimization file that developer shouldn't ever have to commit. However, currently, when running `create-next-app`, `.yarn/install-state.gz` is being commited. ### Remaining work I apologize for only modifying one template initially to initiate the discussion first. If this change is agreed upon, it should be synchronized with other `.gitignore` templates. Would it be possible to follow a similar approach as in https://github.com/vercel/next.js/pull/47241? I would appreciate any assistance in syncing this change. |
||
|---|---|---|
| .. | ||
| components | ||
| helper | ||
| lang | ||
| pages | ||
| .babelrc | ||
| .eslintrc | ||
| .gitignore | ||
| .npmrc | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
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 withlocale,messagesprops- Default message extraction via
@formatjs/cliintegration - Pre-compile messages into AST with
babel-plugin-formatjsfor 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.