Can't get running react-intl within App Routing in Next.js 13

336 Views Asked by At

I am integrating Next.js 13 with App Routing and react-intl. The only way I know to obtain internationalization information to initialize IntlProvider is by using the 'next/router' exported useRouter. However, using that hook inside the 'app' folder (specific to App Routing) is not allowed. What alternatives do I have?

I have configured next in next.config.mjs like this:

/** 
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ["en", "es"],
    defaultLocale: "en",
  },
};

export default nextConfig;

I would like to obtain the current locale information, the list of locales, and the default locale to build the necessary data for using IntlProvider.

<IntlProvider
    locale={locale!}
    messages={messages}
    defaultLocale={defaultLocale}
>
    {children}
</IntlProvider>

messages is a map from locale to an object containing the translations.

0

There are 0 best solutions below