useTranslations in RSC breaks static export (...because it used headers())

[daveycodez]

Description

Howdy. Love the library, using it with Next.js App Router. Got it working pretty well for a hybrid application setup to run both as RSC's and as static exports. Only one issue I'm running into...

I'm able to useTranslations just fine in server components, this is great for SSR. It works in npm run dev, it works in production on Vercel, very good.

However, once I do my static export, I get the following error:

Error: Route /[locale] with `dynamic = "error"` couldn't be rendered statically because it used `headers`.

Here is my page

import { useTranslations } from "next-intl"

export default function Home() {
    const t = useTranslations("index")

    return (
        <main className="my-auto max-w-3xl items-center mx-auto gap-10 flex flex-col text-center p-4">
            <div className="flex flex-col gap-6">
                <h1>
                    Next.js Capacitor
                    {" "}
                    {t("hybrid")}
                </h1>

                <p className="text-balance text-muted-foreground lg:text-lg">
                    <b className="text-foreground">
                        NEW-TECH
                    </b>

                    {" "}
                    {t("description_1")}
                </p>

                <p className="text-balance text-muted-foreground lg:text-lg">
                    <b className="text-foreground">
                        NEW-TECH
                    </b>

                    {" "}
                    {t("description_2")}
                </p>
            </div>
        </main>
    )
}

Sadly I have to add "use client" everywhere I am using useTranslations, which is only required for static exports. I wish there was some way to bypass this, so I didn't have to duplicate tons of components into client versions, just to use translations on them, specifically for static export. Since the RSC's work just fine and do compile into static pages without useTranslations

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://newtech.dev

Reproduction description

useTranslations in a server component with output: "export"

Expected behaviour

No error, translations just work regardless of static export when using useTranslations hook, skips the headers() check during static exports, or skips it altogether?

[daveycodez]

I tried this but it gives the error that useTranslations can't be used in an async component

export default async function Home({
    params
}: {
    params: Promise<{ locale: Locale }>
}) {
    const { locale } = await params
    setRequestLocale(locale)

    const t = useTranslations("index")
}

[daveycodez]

Funnily enough, this fixes it but I don't understand why

export default async function Home({
    params
}: {
    params: Promise<unknown>
}) {
    await params
    const t = await getTranslations("index")
}

If I don't await params here, it will break during static export. It's weird because I don't have to setRequestLocale? Well I'm doing that in my layout... Maybe that's why? It needs to wait for that?

I might have made a discovery about the setRequestLocale thing only needing to be called in the [locale] layout. It appears to propagate to every other server component page that awaits params

[amannn]

Hey, the docs cover all the aspects you're asking about:

1. Static rendering
2. Static export
3. Async components

Please make sure to check there first! 🙂

I might have made a discovery about the setRequestLocale thing only needing to be called in the [locale] layout.

Nope, while it might work sometimes, there's a race condition. For it to work reliably, you need to add setRequestLocale to all relevant layouts and pages.

As a side note, static rendering should hopefully get easier in the near future: #663 (comment). I know it's unfortunately a bit cumbersome currently.

I'll move this issue to a discussion since it's a usage question.

[daveycodez]

So the correct way for a hybrid static application isn't specifically covered in the docs, just wanted to make sure I got that right.

The static page.tsx example is outdated because you have to await params in Next 15

For a static async component, we need to await params then setRequestLocale then use await getMessages instead of useMessages? Just wanted to be clear that's the best way to do it.

Also curious if beta v4 has a better way to handle specifically a hybrid static asynchronous component. I'll keep posted for that 🤞🏼

[daveycodez]

To be clear this is the outdated example

import {setRequestLocale} from 'next-intl/server';
 
export default function IndexPage({params: {locale}}) {
  // Enable static rendering
  setRequestLocale(locale);
 
  // Once the request locale is set, you
  // can call hooks from `next-intl`
  const t = useTranslations('IndexPage');
 
  return (
    // ...
  );
}

This can't be synchronous in Next 15