8618ab85ad
Again, related to [12964](https://github.com/zeit/next.js/issues/12964) After checking all the other examples and the ongoing pull requests, I believe that with this PR being merged, all the examples should be free of redundant react imports. Let me know if you want me to edit anything that you don't like. Regards with-typescript with-atstroturf with-atlaskit with-styletron with-styled-components-rtl with-stylesheet with-stomp with-stitches-styled with-stitches with-slate with-sentry-simple with-sentry with-segment-analytics with-rematch with-relay-modern with-reflux with-redux-wrapper with-react-relay-network with-react-native with-react-multi-carousel with-react-jss with-react-helmet with-react-ga with-quill-js with-prefetching with-google-analytics-amp with-google-analytics with-framer-motion with-flow with-firebase-hosting with-firebase-cloud-messaging with-firebase-authentication with-expo with-dynamic-app-layout with-draft-js with-cxs with-cerebral with-ant-design-mobile with-algolia-react-instantsearch using-preact progressive-render |
||
|---|---|---|
| .. | ||
| components | ||
| lang | ||
| pages | ||
| scripts | ||
| .gitignore | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
| server.js | ||
Example app with React Intl
This example app shows how to integrate React Intl with Next.
How to use
Using create-next-app
Execute create-next-app with npm or Yarn to bootstrap the example:
npm init next-app --example with-react-intl with-react-intl-app
# or
yarn create next-app --example with-react-intl with-react-intl-app
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-react-intl
cd with-react-intl
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
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.jscustomization - React Intl integration with custom App component
<IntlProvider>creation withlocale,messagesprops- Default message extraction via
babel-plugin-react-intlintegration - Translation management via build script and customized Next server
Translation Management
This app stores translations and default strings in the lang/ dir. This dir has .messages/ subdir which is where React Intl's Babel plugin outputs the default messages it extracts from the source code. 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.
FormattedHTMLMessage support (react-intl pre-v4)
Out of the box, this example does not support the use of the FormattedHTMLMessage component on the server due to DOMParser not being present in a Node environment.
This functionality is deprecated and has been removed as of react-intl 4.0
If you still want to enable this feature, you should install a DOMParser implementation (e.g. xmldom or jsdom) and enable the polyfill in server.js:
// Polyfill Node with `DOMParser` required by formatjs.
// See: https://github.com/zeit/next.js/issues/10533
const { DOMParser } = require('xmldom')
global.DOMParser = DOMParser
Transpile react-intl
According to react-intl docs, react-intl and its underlying libraries must be transpiled to support older browsers (eg IE11). This is done by next-transpile-modules in next.config.js.