terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity
next.js/examples/with-react-intl
History
Matthew Lilley cefbb84230 Fix for locale.split is not a function. (#5794) 
* Fix for locale.split is not a function.

Following from https://github.com/zeit/next.js/pull/5488

- Renamed languages to supportedLanguages
- Firstly, accept languages based on supportedLanguages
- And finally, accept a single language, if it returns false, the default of 'en' is used.

I looked at the navigator library, which is used by 'accept', this should be a more solid solution, since we can now know that `const locale` is always a string.

// Before (Sometimes returns an array as `const local`)
const locale = accept.language(languages) || 'en' 

// After (Always returns a string)
const locale = accept.language(accept.languages(supportedLanguages)) || 'en';

* Update server.js

Update variable name.
2018-12-03 09:10:31 -08:00
..
components update with-react-intl example (#4817) 2018-07-22 01:37:25 +02:00
lang Add example app with React Intl (#1055) 2017-02-24 22:45:18 +01:00
lib Update with-react-intl example (#4825) 2018-07-24 00:43:57 +02:00
pages Fix react-intl example (#4840) 2018-09-02 23:53:43 +02:00
scripts Add example app with React Intl (#1055) 2017-02-24 22:45:18 +01:00
.babelrc Add example app with React Intl (#1055) 2017-02-24 22:45:18 +01:00
.gitignore Add example app with React Intl (#1055) 2017-02-24 22:45:18 +01:00
package.json Update with-react-intl example (#4825) 2018-07-24 00:43:57 +02:00
README.md Update with-react-intl example (#4825) 2018-07-24 00:43:57 +02:00
server.js Fix for locale.split is not a function. (#5794) 2018-12-03 09:10:31 -08:00

README.md

Deploy to now

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.js customization
  • React Intl integration with custom App component
  • <IntlProvider> creation with locale, messages, and initialNow props
  • Default message extraction via babel-plugin-react-intl integration
  • 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.