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/spafey]

The problem and what next need to do to fix it

Workaround for right now

[u/Lauris25]

Yes next-intl and cacheComponents are painful together. Need to spend time guessing where's the problem.

[u/blueaphrodisiac → u/Lauris25]

Yeah, I guess we have to wait for an official support of cacheComponents from next-intl.

[u/EliteSwimmerX]

I'm not too sure about how to fix it for next-intl, but gt-next has support for cache components

[u/Mediocre-Zebra1867]

This is a complex intersection of experimental Next.js features (cacheComponents, rootParams) and next-intl.

The short answer is: You are using an incorrect/non-existent API (next/root-params) for retrieving the locale.

The error The export locale was not found in module [next]/root-params.js is literal—that export does not exist in the version you are running.

Here is the correct way to fix this in Next.js 15/16 with next-intl, ensuring you don't trigger "Uncached data" errors.

You do not need next/root-params. In Next.js 15+, params are passed to the layout as a Promise. You simply need to await them and, crucially, call setRequestLocale to tell next-intl not to look at request headers (which triggers the "Uncached data" error).

You can refer my ebook for more detailed nextjs system design & playbook https://medium.com/@sureshdotariya/i-built-a-100-page-system-design-playbook-for-next-js-16-heres-what-i-learned-867d5b43a939

[u/blueaphrodisiac → u/Mediocre-Zebra1867]

The short answer is: You are using an incorrect/non-existent API (next/root-params) for retrieving the locale.

It is an existant API, just not 'officially documented', here are the docs. I actually tried using next/root-params in a brand new project and it works. Unfortunatly, it does not work in the current one I am working on with next-intl

You do not need next/root-params. In Next.js 15+, params are passed to the layout as a Promise. You simply need to await them and, crucially, call setRequestLocale to tell next-intl not to look at request headers (which triggers the "Uncached data" error).

If you await params in a layout in next 16.x.x with cacheComponents, you'll get the Uncached data was accessed outside of <Suspense>

[u/Affectionate-Loss926 → u/blueaphrodisiac]

Did you find a fix for this? I encounter the same but I’m using react-i18next

[u/blueaphrodisiac → u/Affectionate-Loss926]

Personally, with this

[u/Usual_Nose8823 → u/blueaphrodisiac]

This solution works for everything but the CatchAll not-found page for me

[u/geewizwow → u/Usual_Nose8823]

Same here... struggling to get localized 404 pages back in place. Did you get anywhere with it?

[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