feat(i18n): adopt next/root-params

Next.js 16.3 exposes the `[locale]` root segment to Server Components via
`next/root-params`, which next-intl reads directly as of 4.13. That removes the
`setRequestLocale` bookkeeping the app needed for static rendering, along with
the locale threading through every page's `params`.

- `i18n.tsx` resolves the locale from the root param, so `requestLocale` is no
  longer needed. An explicit locale passed by a call site still wins, which
  stays useful for Server Actions and Route Handlers, where `next/root-params`
  is not supported yet
- the root layout reads the locale via `getLocale()`, which returns the already
  validated value from `i18n.tsx`, and no longer receives `params`
- `generateMetadata` and `getLocaleAndPath` read `next/root-params` directly
  rather than `getLocale()`, because they need the raw segment: `getLocale()`
  returns the already defaulted value, which would change the metadata emitted
  for unknown and disabled locales and make the notFound/redirect validation in
  `getLocaleAndPath` unreachable

Author: amannn

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

@@ -61,10 +61,10 @@ export const generateStaticParams = async () => {
 // finally it returns (if the locale and route are valid) the React Component with the relevant context
 // and attached context providers for rendering the current page
 const getPage: FC<PageParams> = async props => {
-  const { path, locale: routeLocale } = await props.params;
+  const { path } = await props.params;
 
   // Gets the current full pathname for a given path
-  const [locale, pathname] = basePage.getLocaleAndPath(path, routeLocale);
+  const [locale, pathname] = await basePage.getLocaleAndPath(path);
 
   // Gets the Markdown content and context
   const [content, context] = await basePage.getMarkdownContext({

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

@@ -41,10 +41,10 @@ export const generateStaticParams = async () => {
 // finally it returns (if the locale and route are valid) the React Component with the relevant context
 // and attached context providers for rendering the current page
 const getPage: FC<PageParams> = async props => {
-  const { path, locale: routeLocale } = await props.params;
+  const { path } = await props.params;
 
   // Gets the current full pathname for a given path
-  const [locale, pathname] = basePage.getLocaleAndPath(path, routeLocale);
+  const [locale, pathname] = await basePage.getLocaleAndPath(path);
 
   // Verifies if the current route is a dynamic route
   const isDynamicRoute = BLOG_DYNAMIC_ROUTES.some(r => r.includes(pathname));

apps/site/app/[locale]/download/archive/[version]/page.tsx

@@ -43,10 +43,10 @@ export const generateStaticParams = async () => {
 // finally it returns (if the locale and route are valid) the React Component with the relevant context
 // and attached context providers for rendering the current page
 const getPage: FC<PageParams> = async props => {
-  const { version, locale: routeLocale } = await props.params;
+  const { version } = await props.params;
 
   // Gets the current full pathname for a given path
-  const [locale, pathname] = basePage.getLocaleAndPath(version, routeLocale);
+  const [locale, pathname] = await basePage.getLocaleAndPath(version);
 
   if (version === 'current') {
     const releaseData = await provideReleaseData();

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

@@ -2,6 +2,7 @@ import PlatformAnalytics from '#platform/analytics';
 import { availableLocales, defaultLocale } from '@node-core/website-i18n';
 import classNames from 'classnames';
 import { NextIntlClientProvider } from 'next-intl';
+import { getLocale } from 'next-intl/server';
 
 import BaseLayout from '#site/layouts/Base';
 import { IBM_PLEX_MONO, OPEN_SANS } from '#site/next.fonts';
@@ -13,12 +14,8 @@ import '#site/styles/index.css';
 
 const fontClasses = classNames(IBM_PLEX_MONO.variable, OPEN_SANS.variable);
 
-type RootLayoutProps = PropsWithChildren<{
-  params: Promise<{ locale: string }>;
-}>;
-
-const RootLayout: FC<RootLayoutProps> = async ({ children, params }) => {
-  const { locale } = await params;
+const RootLayout: FC<PropsWithChildren> = async ({ children }) => {
+  const locale = await getLocale();
 
   const { langDir, hrefLang } =
     availableLocales.find(l => l.code === locale) || defaultLocale;

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

@@ -50,10 +50,10 @@ export const generateStaticParams = async () => {
 // finally it returns (if the locale and route are valid) the React Component with the relevant context
 // and attached context providers for rendering the current page
 const getPage: FC<PageParams> = async props => {
-  const { path, locale: routeLocale } = await props.params;
+  const { path } = await props.params;
 
   // Gets the current full pathname for a given path
-  const [locale, pathname] = basePage.getLocaleAndPath(path, routeLocale);
+  const [locale, pathname] = await basePage.getLocaleAndPath(path);
 
   // Gets the Markdown content and context
   const [content, context] = await basePage.getMarkdownContext({

apps/site/i18n.tsx

@@ -1,5 +1,6 @@
 import { availableLocaleCodes, defaultLocale } from '@node-core/website-i18n';
 import defaultMessages from '@node-core/website-i18n/locales/en.json';
+import { locale as getRootLocale } from 'next/root-params';
 import { getRequestConfig } from 'next-intl/server';
 
 import { deepMerge } from './util/objects';
@@ -25,9 +26,10 @@ const loadLocaleDictionary = async (locale: string) => {
 };
 
 // Provides `next-intl` configuration for RSC/SSR
-export default getRequestConfig(async ({ requestLocale }) => {
-  // This typically corresponds to the `[locale]` segment
-  let locale = await requestLocale;
+export default getRequestConfig(async params => {
+  // An explicit locale passed to an awaitable API like `getTranslations({ locale })`
+  // wins, otherwise we read the `[locale]` segment of the root layout
+  let locale = params.locale ?? (await getRootLocale());
 
   // Ensure that the incoming locale is valid
   if (!locale || !availableLocaleCodes.includes(locale)) {

apps/site/next.dynamic.page.mjs

@@ -6,7 +6,7 @@ import {
   availableLocaleCodes,
 } from '@node-core/website-i18n';
 import { notFound, redirect } from 'next/navigation';
-import { setRequestLocale } from 'next-intl/server';
+import { locale as getRootLocale } from 'next/root-params';
 
 import { setClientContext } from '#site/client-context';
 import WithLayout from '#site/components/withLayout';
@@ -28,11 +28,13 @@ export const generateViewport = () => ({ ...PAGE_VIEWPORT });
  *
  * @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata
  *
- * @param {{ params: Promise<{ path: Array<string>; locale: string }>, prefix?: string }} props
+ * @param {{ params: Promise<{ path: Array<string> }>, prefix?: string }} props
  * @returns {Promise<import('next').Metadata>} the metadata for the page
  */
 export const generateMetadata = async ({ params, prefix }) => {
-  const { path = [], locale = defaultLocale.code } = await params;
+  const { path = [] } = await params;
+
+  const locale = (await getRootLocale()) ?? defaultLocale.code;
 
   const pathname = dynamicRouter.getPathname(path);
 
@@ -46,15 +48,16 @@ export const generateMetadata = async ({ params, prefix }) => {
 /**
  * This method is used for retrieving the current locale and pathname from the request
  *
+ * The locale comes from the `[locale]` root param, so pages don't have to read it
+ * from their own `params` and hand it over.
+ *
  * @param {string|Array<string>} path
- * @param {string} locale
- * @returns {[string, string]} the locale and pathname for the request
+ * @returns {Promise<[string, string]>} the locale and pathname for the request
  */
-export const getLocaleAndPath = (path = [], locale = defaultLocale.code) => {
-  if (!availableLocaleCodes.includes(locale)) {
-    // Forces the current locale to be the Default Locale
-    setRequestLocale(defaultLocale.code);
+export const getLocaleAndPath = async (path = []) => {
+  const locale = (await getRootLocale()) ?? defaultLocale.code;
 
+  if (!availableLocaleCodes.includes(locale)) {
     if (!allLocaleCodes.includes(locale)) {
       // when the locale is not listed in the locales, return NotFound
       return notFound();
@@ -66,9 +69,6 @@ export const getLocaleAndPath = (path = [], locale = defaultLocale.code) => {
     return redirect(`/${defaultLocale.code}/${pathname}`);
   }
 
-  // Configures the current Locale to be the given Locale of the Request
-  setRequestLocale(locale);
-
   // Gets the current full pathname for a given path
   return [locale, dynamicRouter.getPathname(path)];
 };