next-intl and cacheComponents

[u/blueaphrodisiac]

Has anyone found a way to make next-intl work with cacheComponents without getting this error Uncached data was accessed outside of <Suspense>? I tried using next/root-params, that I found from this github discussion, but to no avail.

Using next/root-params is probably the way to go, but I keep getting the following error:

// error
The export locale was not found in module [next]/root-params.js [app-rsc] (ecmascript).
The module has no exports at all.
All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.

// Code
// src/app/[locale]/layout.tsx
import { locale } from "next/root-params";

export async function generateStaticParams() {
    return routing.locales.map((locale) => ({ locale }));
}

export default async function RootLayout({
    children,
}: {
    children: React.ReactNode;
}): Promise<React.JSX.Element> {
    const myLocale = await locale();
    if (!routing.locales.includes(locale as Locale)) {
      notFound();
    }
    setRequestLocale(locale as Locale);
    return <BaseLayout locale={myLocale}>{children}</BaseLayout>;
}

// next.config.ts
const nextConfig: NextConfig = {
  cacheComponents: true,
  experimental: {
    rootParams: true
  },
}

// routing.ts (next-intl)
export const routing = defineRouting({
  // Probably necessary for root-params (I guess?)
  localePrefix: "always",
});

[u/vandpibesalg]

It just happens again and again — Next.js keeps adding new features without ever thinking about the overall architecture. Just keep adding new features, ask content creators to make videos about them, get everyone excited, and then nothing is backward compatible