forked from vercel/next.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
switch to function component with-react-intl example (vercel#14217)
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
1 parent
29ba9c6
commit 389dce1
Showing
1 changed file
with
24 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |