feat: Exploration of ppr, dynamicIO and rootParams

examples/example-app-router/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

examples/example-app-router/next.config.mjs

@@ -9,6 +9,11 @@ const withNextIntl = createNextIntlPlugin({
 });
 
 /** @type {import('next').NextConfig} */
-const config = {};
+const config = {
+  experimental: {
+    dynamicIO: true,
+    ppr: true
+  }
+};
 
 export default withNextIntl(config);

examples/example-app-router/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "next": "^14.2.4",
+    "next": "15.0.4-canary.8",
     "next-intl": "^3.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/example-app-router/src/app/[locale]/layout.tsx

@@ -1,39 +1,35 @@
 import {notFound} from 'next/navigation';
-import {Locale, hasLocale} from 'next-intl';
-import {getTranslations, setRequestLocale} from 'next-intl/server';
+import {hasLocale} from 'next-intl';
+import {getTranslations} from 'next-intl/server';
 import {ReactNode} from 'react';
 import BaseLayout from '@/components/BaseLayout';
 import {routing} from '@/i18n/routing';
 
 type Props = {
   children: ReactNode;
-  params: {locale: Locale};
+  params: Promise<{
+    locale: string;
+  }>;
 };
 
 export function generateStaticParams() {
   return routing.locales.map((locale) => ({locale}));
 }
 
-export async function generateMetadata({
-  params: {locale}
-}: Omit<Props, 'children'>) {
-  const t = await getTranslations({locale, namespace: 'LocaleLayout'});
+export async function generateMetadata() {
+  const t = await getTranslations('LocaleLayout');
 
   return {
     title: t('title')
   };
 }
 
-export default async function LocaleLayout({
-  children,
-  params: {locale}
-}: Props) {
+export default async function LocaleLayout({children, params}: Props) {
+  // This is only necessary as long as there's no `dynamicParams = false`
+  const {locale} = await params;
   if (!hasLocale(routing.locales, locale)) {
     notFound();
   }
 
-  // Enable static rendering
-  setRequestLocale(locale);
-
   return <BaseLayout locale={locale}>{children}</BaseLayout>;
 }

examples/example-app-router/src/app/[locale]/page.tsx

@@ -1,15 +1,7 @@
-import {Locale, useTranslations} from 'next-intl';
-import {setRequestLocale} from 'next-intl/server';
+import {useTranslations} from 'next-intl';
 import PageLayout from '@/components/PageLayout';
 
-type Props = {
-  params: {locale: Locale};
-};
-
-export default function IndexPage({params: {locale}}: Props) {
-  // Enable static rendering
-  setRequestLocale(locale);
-
+export default function IndexPage() {
   const t = useTranslations('IndexPage');
 
   return (

examples/example-app-router/src/app/[locale]/pathnames/page.tsx

@@ -1,15 +1,7 @@
-import {Locale, useTranslations} from 'next-intl';
-import {setRequestLocale} from 'next-intl/server';
+import {useTranslations} from 'next-intl';
 import PageLayout from '@/components/PageLayout';
 
-type Props = {
-  params: {locale: Locale};
-};
-
-export default function PathnamesPage({params: {locale}}: Props) {
-  // Enable static rendering
-  setRequestLocale(locale);
-
+export default function PathnamesPage() {
   const t = useTranslations('PathnamesPage');
 
   return (

examples/example-app-router/src/app/layout.tsx

@@ -8,5 +8,6 @@ type Props = {
 // Since we have a `not-found.tsx` page on the root, a layout file
 // is required, even if it's just passing children through.
 export default function RootLayout({children}: Props) {
+  // TODO: Can we get rid of this?
   return children;
 }

examples/example-app-router/src/app/manifest.ts

@@ -1,12 +1,11 @@
 import {MetadataRoute} from 'next';
-import {getTranslations} from 'next-intl/server';
 
 export default async function manifest(): Promise<MetadataRoute.Manifest> {
-  const locale = 'en';
-  const t = await getTranslations({locale, namespace: 'Manifest'});
+  // const t = await getTranslations('Manifest');
 
   return {
-    name: t('name'),
+    // InvariantError: Invariant: Missing Client Reference Manifest for /manifest.webmanifest. This is a bug in Next.js.
+    // name: t('name'),
     start_url: '/',
     theme_color: '#101E33'
   };

examples/example-app-router/src/components/BaseLayout.tsx

@@ -2,7 +2,7 @@ import {clsx} from 'clsx';
 import {Inter} from 'next/font/google';
 import {NextIntlClientProvider} from 'next-intl';
 import {getMessages} from 'next-intl/server';
-import {ReactNode} from 'react';
+import {ReactNode, Suspense} from 'react';
 import Navigation from '@/components/Navigation';
 
 const inter = Inter({subsets: ['latin']});
@@ -20,10 +20,12 @@ export default async function BaseLayout({children, locale}: Props) {
   return (
     <html className="h-full" lang={locale}>
       <body className={clsx(inter.className, 'flex h-full flex-col')}>
-        <NextIntlClientProvider messages={messages}>
-          <Navigation />
-          {children}
-        </NextIntlClientProvider>
+        <Suspense>
+          <NextIntlClientProvider messages={messages}>
+            <Navigation />
+            {children}
+          </NextIntlClientProvider>
+        </Suspense>
       </body>
     </html>
   );

examples/example-app-router/src/i18n/future.ts

@@ -0,0 +1,13 @@
+export async function rootParams(): Promise<{
+  locale?: string;
+}> {
+  // Outside of `[locale]`
+  // return Promise.resolve({
+  //   locale: undefined
+  // });
+
+  // In `[locale]`
+  return Promise.resolve({
+    locale: 'en'
+  });
+}

examples/example-app-router/src/i18n/request.ts

@@ -1,16 +1,17 @@
 import {hasLocale} from 'next-intl';
 import {getRequestConfig} from 'next-intl/server';
+import messages from '../../messages/en.json';
+import {rootParams} from './future';
 import {routing} from './routing';
 
-export default getRequestConfig(async ({requestLocale}) => {
-  // Typically corresponds to the `[locale]` segment
-  const requested = await requestLocale;
-  const locale = hasLocale(routing.locales, requested)
-    ? requested
+export default getRequestConfig(async () => {
+  const params = await rootParams();
+  const locale = hasLocale(routing.locales, params.locale)
+    ? params.locale
     : routing.defaultLocale;
 
   return {
     locale,
-    messages: (await import(`../../messages/${locale}.json`)).default
+    messages
   };
 });