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

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/components/Common/Breadcrumbs/index.tsx

@@ -39,7 +39,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
 
         return (
           <BreadcrumbItem
-            key={link.label.toString()}
+            key={link.label?.toString()}
             hidden={hidden}
             hideSeparator={isLastItem}
             position={position + +!hideHome}

apps/site/components/Common/ProgressionSidebar/index.tsx

@@ -39,7 +39,7 @@ const ProgressionSidebar: FC<ProgressionSidebarProps> = ({ groups }) => {
 
       {groups.map(({ groupName, items }) => (
         <ProgressionSidebarGroup
-          key={groupName.toString()}
+          key={groupName?.toString()}
           groupName={groupName}
           items={items}
         />

apps/site/components/Containers/Sidebar/index.tsx

@@ -37,7 +37,7 @@ const SideBar: FC<SidebarProps> = ({ groups }) => {
 
       {groups.map(({ groupName, items }) => (
         <SidebarGroup
-          key={groupName.toString()}
+          key={groupName?.toString()}
           groupName={groupName}
           items={items}
         />

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/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",

apps/site/types/i18n.ts

@@ -1,6 +1,3 @@
-import type { JSXElementConstructor, ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-export type FormattedMessage =
-  | string
-  | ReactElement<HTMLElement, string | JSXElementConstructor<HTMLElement>>
-  | ReadonlyArray<ReactNode>;
+export type FormattedMessage = ReactNode;