Error When Updating next-intl to 3.0.0-rc.4: 'unstable_setRequestLocale' Requires Static Rendering but 'cookies' Are Necessary for Auth

[abiddraws]

Description

Description:
When attempting to update the 'next-intl' package to version 3.0.0-rc.4, it insists on using static rendering through the 'unstable_setRequestLocale' API. However, my application relies on the use of cookies for authentication, and this requirement for static rendering is causing build-time errors.

Error Message:

Dynamic server usage: Page couldn't be rendered statically because it used `cookies`

If I run without unstable_setRequestLocale , I am getting the below error

Error: Usage of next-intl APIs in Server Components currently opts into dynamic rendering. This limitation will eventually be lifted, but as a stopgap solution, you can use the `unstable_setRequestLocale` API to enable static rendering

Additional Information:

• My application requires the use of cookies for authentication, which is non-negotiable.
• I am using the following code to configure 'supabase' with 'cookies':

import { cookies } from "next/headers";
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
const supabase = createServerComponentClient({ cookies });

Possible Solutions:
I am looking for guidance on how to resolve this issue. Is there a workaround that would allow me to continue using cookies for authentication while still utilizing 'next-intl' version 3.0.0-rc.4 and its 'unstable_setRequestLocale' feature for static rendering?

Your assistance and insights would be greatly appreciated. Thank you!

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/sandbox/next-intl-bug-template-app-forked-hk8yrr?file=%2Fpackage.json%3A5%2C15

Reproduction description

1. Update the 'next-intl' package to version 3.0.0-rc.4.
2. Configure 'unstable_setRequestLocale' to use static rendering.
3. Attempt to build the application.

const locales = ["en", "ar"];

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

export default async function Layout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { locale: string };
}):{
  unstable_setRequestLocale(params.locale);
// remaining code
}

Expected behaviour

The application should build successfully, even if cookies are being used for authentication.

Actual Behavior:
The build process fails with the error message: "Page couldn't be rendered statically because it used 'cookies'."

[amannn]

I currently see this error message when running your sandbox:

But yes, if you use cookies in your app code, you can't use static rendering. Therefore the fix is to remove generateStaticParams & unstable_setRequestLocale and your app should work.

Does that help?

[abiddraws]

If I remove the generateStaticParams & unstable_setRequestLocale I get this error while building app

Error: Usage of next-intl APIs in Server Components currently opts into dynamic rendering. This limitation will eventually be lifted, but as a stopgap solution, you can use the `unstable_setRequestLocale` API to enable static rendering,

[amannn]

Not sure if I'm missing something, but when I open your reproduction I see this error:

There seems to be the wrong version of next-intl in the CodeSandbox.

After re-installing the RC, I get this error:

That's correct, since there's no i18n.ts file that's required for Server Components usage.

[abiddraws]

@amannn Please check from https://github.com/abiddraws/MyNextJs . If you try to build npm run build the app you will get the error
Usage of next-intl APIs in Server Components currently opts into dynamic rendering. This limitation will eventually be lifted, but as a stopgap solution, you can use the `unstable_setRequestLocale` API to enable static rendering

[amannn]

The issue is this line here: https://github.com/abiddraws/MyNextJs/blob/1b4bb4cd148107c6a8d636c953f63e642d975b1f/app/page.tsx#L1

The navigation APIs from next-intl can only be used within the [locale] segment. You should import from next/navigation in app/page.tsx.

I made a note in #149 to improve the error message here. Thanks for the report!

[abiddraws]

🌟 Thanks a million! Your help made my day! 🙌