chore: Upgrade next-intl to 3.24, migrate deprecated APIs (#7177)

* chore: Upgrade next-intl to 3.24, migrate deprecated APIs

* reduce changes

* revert another change

* fix: Read locale from params in layout

* address review points

---------

Co-authored-by: Claudio W <[email protected]>

Author: amannn

apps/site/app/[locale]/[[...path]]/page.tsx

@@ -1,6 +1,6 @@
 import { setContext, setTags } from '@sentry/nextjs';
 import { notFound, redirect } from 'next/navigation';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { setRequestLocale } from 'next-intl/server';
 import type { FC } from 'react';
 
 import { setClientContext } from '@/client-context';
@@ -69,7 +69,7 @@ const getPage: FC<DynamicParams> = async ({ params }) => {
 
   if (!availableLocaleCodes.includes(locale)) {
     // Forces the current locale to be the Default Locale
-    unstable_setRequestLocale(defaultLocale.code);
+    setRequestLocale(defaultLocale.code);
 
     if (!allLocaleCodes.includes(locale)) {
       // when the locale is not listed in the locales, return NotFound
@@ -82,7 +82,7 @@ const getPage: FC<DynamicParams> = async ({ params }) => {
   }
 
   // Configures the current Locale to be the given Locale of the Request
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   // Gets the current full pathname for a given path
   const pathname = dynamicRouter.getPathname(path);

apps/site/app/[locale]/layout.tsx

@@ -1,7 +1,6 @@
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import classNames from 'classnames';
-import { getLocale } from 'next-intl/server';
 import type { FC, PropsWithChildren } from 'react';
 
 import BaseLayout from '@/layouts/Base';
@@ -15,8 +14,14 @@ import '@/styles/index.css';
 
 const fontClasses = classNames(IBM_PLEX_MONO.variable, OPEN_SANS.variable);
 
-const RootLayout: FC<PropsWithChildren> = async ({ children }) => {
-  const locale = await getLocale();
+const RootLayout: FC<
+  PropsWithChildren<{
+    params: Promise<{
+      locale: string;
+    }>;
+  }>
+> = async ({ children, params }) => {
+  const { locale } = await params;
 
   const { langDir, hrefLang } = availableLocalesMap[locale] || defaultLocale;
 

apps/site/components/__mocks__/next-intl.mjs

@@ -27,7 +27,7 @@ export const useFormatter = () => {
 
 export const NextIntlClientProvider = ({ children }) => children;
 
-export const createSharedPathnamesNavigation = () => ({
+export const createNavigation = () => ({
   Link: Link,
   redirect: redirect,
   usePathname: usePathname,

apps/site/hooks/react-generic/useSiteNavigation.ts

@@ -39,7 +39,7 @@ const useSiteNavigation = () => {
 
   const mapNavigationEntries = (entries: Navigation, context: Context = {}) => {
     const getFormattedMessage = (label: string, key: string) =>
-      t.rich(label, context[key] || {});
+      t.rich(label, context[key] || {}) as FormattedMessage;
 
     return Object.entries(entries).map(
       ([key, { label, link, items, target }]): [

apps/site/i18n.tsx

@@ -1,7 +1,7 @@
 import { importLocale } from '@node-core/website-i18n';
 import { getRequestConfig } from 'next-intl/server';
 
-import { availableLocaleCodes } from '@/next.locales.mjs';
+import { availableLocaleCodes, defaultLocale } from '@/next.locales.mjs';
 
 import deepMerge from './util/deepMerge';
 
@@ -13,7 +13,7 @@ const loadLocaleDictionary = async (locale: string) => {
     '@node-core/website-i18n/locales/en.json'
   ).then(f => f.default);
 
-  if (locale === 'en') {
+  if (locale === defaultLocale.code) {
     return defaultMessages;
   }
 
@@ -30,9 +30,20 @@ const loadLocaleDictionary = async (locale: string) => {
 };
 
 // Provides `next-intl` configuration for RSC/SSR
-export default getRequestConfig(async ({ locale }) => ({
-  // This is the dictionary of messages to be loaded
-  messages: await loadLocaleDictionary(locale),
-  // We always define the App timezone as UTC
-  timeZone: 'Etc/UTC',
-}));
+export default getRequestConfig(async ({ requestLocale }) => {
+  // This typically corresponds to the `[locale]` segment
+  let locale = await requestLocale;
+
+  // Ensure that the incoming locale is valid
+  if (!locale || !availableLocaleCodes.includes(locale)) {
+    locale = defaultLocale.code;
+  }
+
+  return {
+    locale,
+    // This is the dictionary of messages to be loaded
+    messages: await loadLocaleDictionary(locale),
+    // We always define the App timezone as UTC
+    timeZone: 'Etc/UTC',
+  };
+});

apps/site/navigation.mjs

@@ -1,8 +1,9 @@
 'use strict';
 
-import { createSharedPathnamesNavigation } from 'next-intl/navigation';
+import { createNavigation } from 'next-intl/navigation';
 
 import { availableLocaleCodes } from './next.locales.mjs';
 
-export const { Link, redirect, usePathname, useRouter } =
-  createSharedPathnamesNavigation({ locales: availableLocaleCodes });
+export const { Link, redirect, usePathname, useRouter } = createNavigation({
+  locales: availableLocaleCodes,
+});

apps/site/package.json

@@ -68,7 +68,7 @@
     "glob": "~11.0.0",
     "gray-matter": "~4.0.3",
     "next": "~14.2.14",
-    "next-intl": "~3.21.1",
+    "next-intl": "~3.24.0",
     "next-themes": "~0.3.0",
     "postcss": "~8.4.47",
     "postcss-calc": "~10.0.2",