I am getting MISSING_MESSAGE error for next-intl npm package for next.js app

Question

import { useEffect } from "react";
import type { AppProps } from "next/app";
import Script from "next/script";
import { SWRConfig } from "swr";
import { useRouter } from "next/router"
import { AppContext } from "@context/index";
import { NextIntlProvider } from 'next-intl'

function MyApp({ Component, pageProps }: AppProps) {

<SWRConfig
      value={{
        onErrorRetry: (error: any) => {
          // Never retry on 401.
          if (error.status === 401) return;
        },
        errorRetryCount: 2,
      }}
    >
    <>
      <NextIntlProvider messages={pageProps.messages}>
        <AppContext>
          <div>
          
            <Component {...pageProps} />
        
          </div>
        </AppContext>
        </NextIntlProvider>
      
      </>
    </SWRConfig>
 );
}

export default MyApp;

I am getting code: 'MISSING_MESSAGE', originalMessage: 'No messages were configured on the provider.' error even after following documentation of Next-intl it says message is not configured. I have configured that massage in the _app.tsx file page folder. please guide me to solve this issue.

Answer 1

You have then to configure it in the getStaticProps of the page file: You can refer from this link!