50662c6a83
The `initialNow` prop is used to avoid content mismatches when Universal/SSR apps render date values using components like `<FormattedRelative>`. If this value is created in `render()`, then the server will generate it and then the client will also generate it during hydration / initial render, resulting in two different values and content mismatches like: > Warning: Text content did not match. Server: "in 1,741,545 seconds" Client: "in 1,741,543 seconds" If the value is instead generated in `getInitialProps`, then the client's initial rendering will match because it will use the same value sent down by the server. |
||
|---|---|---|
| .. | ||
| components | ||
| lang | ||
| lib | ||
| pages | ||
| scripts | ||
| .babelrc | ||
| .gitignore | ||
| package.json | ||
| README.md | ||
| server.js | ||
Example app with React Intl
How to use
Using create-next-app
Execute create-next-app with Yarn or npx 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
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 now (download)
now
The idea behind the example
This example app shows how to integrate React Intl with Next.
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,messages, andinitialNowprops- Default message extraction via
babel-plugin-react-intlintegration - Translation management via build script and customized Next server
- withIntl HOC for pages because injectIntl do not hoist static methods.
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.