1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

update with-react-intl example (#4817)

This commit is contained in:
Tomek 2018-07-22 01:37:25 +02:00 committed by Tim Neutkens
parent 0d93d42640
commit 822cc3c863
5 changed files with 45 additions and 50 deletions

View file

@ -46,7 +46,7 @@ This example app shows how to integrate [React Intl][] with Next.
- Server-side language negotiation - Server-side language negotiation
- React Intl locale data loading via `pages/_document.js` customization - React Intl locale data loading via `pages/_document.js` customization
- React Intl integration at Next page level via `pageWithIntl()` HOC - React Intl integration with [custom App](https://github.com/zeit/next.js#custom-app) component
- `<IntlProvider>` creation with `locale`, `messages`, and `initialNow` props - `<IntlProvider>` creation with `locale`, `messages`, and `initialNow` props
- Default message extraction via `babel-plugin-react-intl` integration - Default message extraction via `babel-plugin-react-intl` integration
- Translation management via build script and customized Next server - Translation management via build script and customized Next server

View file

@ -1,44 +0,0 @@
import React, {Component} from 'react'
import {IntlProvider, addLocaleData, injectIntl} from 'react-intl'
// Register React Intl's locale data for the user's locale in the browser. This
// locale data was added to the page by `pages/_document.js`. This only happens
// once, on initial page load in the browser.
if (typeof window !== 'undefined' && window.ReactIntlLocaleData) {
Object.keys(window.ReactIntlLocaleData).forEach((lang) => {
addLocaleData(window.ReactIntlLocaleData[lang])
})
}
export default (Page) => {
const IntlPage = injectIntl(Page)
return class PageWithIntl extends Component {
static async getInitialProps (context) {
let props
if (typeof Page.getInitialProps === 'function') {
props = await Page.getInitialProps(context)
}
// Get the `locale` and `messages` from the request object on the server.
// In the browser, use the same values that the server serialized.
const {req} = context
const {locale, messages} = req || window.__NEXT_DATA__.props.pageProps
// Always update the current time on page load/transition because the
// <IntlProvider> will be a new instance even with pushState routing.
const now = Date.now()
return {...props, locale, messages, now}
}
render () {
const {locale, messages, now, ...props} = this.props
return (
<IntlProvider locale={locale} messages={messages} initialNow={now}>
<IntlPage {...props} />
</IntlProvider>
)
}
}
}

View file

@ -0,0 +1,41 @@
import App, { Container } from 'next/app'
import React from 'react'
import { IntlProvider, addLocaleData } from 'react-intl'
// Register React Intl's locale data for the user's locale in the browser. This
// locale data was added to the page by `pages/_document.js`. This only happens
// once, on initial page load in the browser.
if (typeof window !== 'undefined' && window.ReactIntlLocaleData) {
Object.keys(window.ReactIntlLocaleData).forEach((lang) => {
addLocaleData(window.ReactIntlLocaleData[lang])
})
}
export default class MyApp extends App {
static async getInitialProps ({ Component, router, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
// Get the `locale` and `messages` from the request object on the server.
// In the browser, use the same values that the server serialized.
const { req } = ctx
const { locale, messages } = req || window.__NEXT_DATA__.props.pageProps
return { pageProps, locale, messages }
}
render () {
const { Component, pageProps, locale, messages } = this.props
const now = Date.now()
return (
<Container>
<IntlProvider locale={locale} messages={messages} initialNow={now}>
<Component {...pageProps} />
</IntlProvider>
</Container>
)
}
}

View file

@ -1,6 +1,5 @@
import React, {Component} from 'react' import React, {Component} from 'react'
import {FormattedRelative} from 'react-intl' import {FormattedRelative} from 'react-intl'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout' import Layout from '../components/Layout'
class About extends Component { class About extends Component {
@ -22,4 +21,4 @@ class About extends Component {
} }
} }
export default pageWithIntl(About) export default About

View file

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import {FormattedMessage, FormattedNumber, defineMessages} from 'react-intl' import {FormattedMessage, FormattedNumber, defineMessages, injectIntl} from 'react-intl'
import Head from 'next/head' import Head from 'next/head'
import pageWithIntl from '../components/PageWithIntl'
import Layout from '../components/Layout' import Layout from '../components/Layout'
const {description} = defineMessages({ const {description} = defineMessages({
@ -11,7 +10,7 @@ const {description} = defineMessages({
} }
}) })
export default pageWithIntl(({intl}) => ( export default injectIntl(({intl}) => (
<Layout> <Layout>
<Head> <Head>
<meta name='description' content={intl.formatMessage(description)} /> <meta name='description' content={intl.formatMessage(description)} />