Getting locale from cookie

[ironsand-sou-eu]

Hi everyone! I appreciate the work being done here, it was a relief to abandon the previous library and adopt next-intl, it makes everything REALLY easy. Thank you all very much.

I'm a noob in next-intl, trying to use localization on server components without the routing (using cookies) and, unfortunately, I'm struggling to get the cookie locale in my server components. According to the docs, I should be able to use next server's cookie() in my i18n/request.ts file. I even saw a video in YouTube in which this was done successfully (in Next 15.1.3).

I'm using Next 16.1.0 though. This is my i18n/request.ts:

import { cookies } from "next/headers";
import { getRequestConfig } from "next-intl/server";
import { COOKIE_KEYS } from "@/shared/global-constants";

export default getRequestConfig(async () => {
  const locale = (await cookies()).get(COOKIE_KEYS.locale)?.value ?? "en";

  return {
    locale,
    messages: (await import(`../../messages/${locale}.json`)).default,
  };
});

This throws an Uncaught Error: 'cookies' was called outside a request scope.

I found a dead discussion here. This discussion has something about using middlewares, but doesn't clarify how (and I have no idea).

Is there any way to retrieve the cookies in i18n/request.ts (or some way to get the locale from the cookie and pass it to next-intl)?

[amannn]

Hey, thanks for the kind words—glad to hear if next-intl is working well for you!

Uncaught Error: 'cookies' was called outside a request scope.

It sounds a bit like something unexpected is calling into your i18n/request.ts. Usually, it should be called automatically when you invoke APIs from next-intl like e.g. useTranslations in a Server Component and in that case, you're within a "request scope". You're not importing the file manually somewhere, right? Also, it's best to avoid putting other exports into the file—only the default one with getRequestConfig.

You can check out App Router without locale-based routing to see a working setup, maybe that helps!

[ironsand-sou-eu]

Summarizing, everything works now.

Thanks for your quick answer. It's a side project, so I'm putting more effort on weekends. ^^

Your answer helped me a lot, because I was following a Youtube guide from some guy who make it the worst way possible (even setting cookies using navigator API and other stuff that made Biome tremble).

I realized that the biggest problem, the one that made my go to the bad tutorial in Youtube, was the lacking of an example for async server function components, in which we can't use useTranslations and should use getTranslations instead.

So, I just have one little suggestion for your example: in addition to the synchronous page, you guys could add an asynchronous page with await getTranslations("...").

I think it would help a lot next-intl noobies like me, and I could even do it and create a PR myself for the example, but I could find a "contribution" section on your Readme, so I though maybe you guys don't accept external contributions.

Anyway, my problem is solved, and thanks a lot!

[amannn]

Awesome, great to hear!

So, I just have one little suggestion for your example: in addition to the synchronous page, you guys could add an asynchronous page with await getTranslations("...").

This is in fact mention right at the end of the setup guide: app/page.tsx. I guess if you jump straight into an example you might not see it though. Not sure if it's worth adding there though, as I'd only recommend using the async variant when you actually need something async like data fetching. I'll keep an eye on this in case more people run into it!

but I could find a "contribution" section on your Readme, so I though maybe you guys don't accept external contributions.

We surely do: CONTRIBUTORS. It's often a good idea to discuss changes upfront though or check for existing discussions before making changes.

Hope everything works well for you now, good luck with your side project! 🙌