a3ffa2e65f
The example was using class-based component for custom _app, switched to functional component approach. **Sidenote:** The existing code didn't gave an error when navigated to a new page using the navbar ![Screenshot 2020-06-16 at 2 47 52 PM](https://user-images.githubusercontent.com/11258286/84760988-6cbebd80-afe6-11ea-9b7f-98aca7404895.png)
36 lines
787 B
JavaScript
36 lines
787 B
JavaScript
import { createIntl, createIntlCache, RawIntlProvider } from 'react-intl'
|
|
|
|
// This is optional but highly recommended
|
|
// since it prevents memory leak
|
|
const cache = createIntlCache()
|
|
|
|
function MyApp({ Component, pageProps, locale, messages }) {
|
|
const intl = createIntl(
|
|
{
|
|
locale,
|
|
messages,
|
|
},
|
|
cache
|
|
)
|
|
return (
|
|
<RawIntlProvider value={intl}>
|
|
<Component {...pageProps} />
|
|
</RawIntlProvider>
|
|
)
|
|
}
|
|
|
|
MyApp.getInitialProps = async ({ Component, ctx }) => {
|
|
let pageProps = {}
|
|
|
|
const { req } = ctx
|
|
const locale = req?.locale ?? ''
|
|
const messages = req?.messages ?? {}
|
|
|
|
if (Component.getInitialProps) {
|
|
Object.assign(pageProps, await Component.getInitialProps(ctx))
|
|
}
|
|
|
|
return { pageProps, locale, messages }
|
|
}
|
|
|
|
export default MyApp
|