2

I'm trying to setup NEXT Js with react-intl.

I've added to my _app.tsx the setup for react-intl as follows:

import { IntlProvider } from 'react-intl';
import English from "../../lang/compiled-locales/en-US.json"
import French from "../../lang/compiled-locales/fr.json"
import configs from '../../configs';

// https://itnext.io/next-js-react-intl-add-internationalisation-to-your-nextjs-app-4f933104b1f7
const MyApp = ({ Component, pageProps }: AppProps) => {
    const { locale } = useRouter()

    const messages = useMemo(() => {
        switch (locale) {
            case "fr":
                return French
            default:
                return English
        }
    }, [locale])

    return <IntlProvider
        locale={locale || configs.languages.default}
        messages={messages}>
        <Component {...pageProps} />
    </IntlProvider>
}

export default MyApp

When I ran it, it worked like a charm, but when I do a page reload, I get the following error:

Server Error
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

I'm guessing it's something to do with SSR but no idea how to fix. Thank you in advance for your help.

Here is the sample usage in my pages/index.tsx

import type { NextPage } from 'next'
import Head from 'next/head'
import { FormattedMessage } from 'react-intl'
import Header from '../components/Header'

const Home: NextPage = () => {

    return <div className="">
        <Head>
            <title><FormattedMessage defaultMessage="FlipFlip - Print your videos for real!" id="landing.seo.title" /></title>
        </Head>

        <Header />
    </div>
}

export default Home
denislexic
  • 10,786
  • 23
  • 84
  • 128
  • Give a try to use [react-intl-universal](https://fe-tool.com/react-intl-universal) with next.js. Here is an example [integrating react-intl-universal with NextJS](https://github.com/alibaba/react-intl-universal/tree/master/packages/react-intl-universal/examples/browser-example) – cwtuan Oct 15 '22 at 12:56

0 Answers0