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.