Skip to content

Commit

Permalink
switch to function component with-react-intl example (#14217)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
darshkpatel committed Jun 16, 2020
1 parent 725376a commit a3ffa2e
Showing 1 changed file with 24 additions and 29 deletions.
53 changes: 24 additions & 29 deletions examples/with-react-intl/pages/_app.js
@@ -1,41 +1,36 @@
import App from 'next/app'
import { createIntl, createIntlCache, RawIntlProvider } from 'react-intl'

// This is optional but highly recommended
// since it prevents memory leak
const cache = createIntlCache()

export default class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {}
function MyApp({ Component, pageProps, locale, messages }) {
const intl = createIntl(
{
locale,
messages,
},
cache
)
return (
<RawIntlProvider value={intl}>
<Component {...pageProps} />
</RawIntlProvider>
)
}

if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
MyApp.getInitialProps = async ({ Component, ctx }) => {
let pageProps = {}

// 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
const { req } = ctx
const locale = req?.locale ?? ''
const messages = req?.messages ?? {}

return { pageProps, locale, messages }
if (Component.getInitialProps) {
Object.assign(pageProps, await Component.getInitialProps(ctx))
}

render() {
const { Component, pageProps, locale, messages } = this.props

const intl = createIntl(
{
locale,
messages,
},
cache
)

return (
<RawIntlProvider value={intl}>
<Component {...pageProps} />
</RawIntlProvider>
)
}
return { pageProps, locale, messages }
}

export default MyApp

0 comments on commit a3ffa2e

Please sign in to comment.