1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-react-intl/pages/_app.js
Brian Beck 50662c6a83 Fix initialNow in react-intl example (#5867)
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.
2018-12-12 11:02:36 +01:00

43 lines
1.4 KiB
JavaScript

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
const initialNow = Date.now()
return { pageProps, locale, messages, initialNow }
}
render () {
const { Component, pageProps, locale, messages, initialNow } = this.props
return (
<Container>
<IntlProvider locale={locale} messages={messages} initialNow={initialNow}>
<Component {...pageProps} />
</IntlProvider>
</Container>
)
}
}