Trouble with statically exporting client components

[KieranMarien]

Hi,

I'm trying to use use translations in a client component and then statically exporting the application. I tried to follow the statically rendering guide as best as possible but I'm a bit confused. https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing#static-rendering

Ignore that it only uses en_us. Just temporary for dev.

app layout looks like this
/app
/[locale]
page1
layout1
/sub
page2
layout2

Both pages are "use client"

My i18n.ts file

export default getRequestConfig(async () => {
  const locale = "en_us";
  const translation = await getTranslationFromAPI(locale);

  return {
    locale: locale,
    messages: { strapi: { ...translation } },
  };
});

My layout1 file

const locales = ["en_us"];

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

export default async function LocaleLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  unstable_setRequestLocale("en_us");
  const messages = await getMessages();

  return (
    <NextIntlClientProvider locale="en_us" messages={messages}>
      <div>{children}</div>
    </NextIntlClientProvider>
  );
}

example of a page

"use client";

import { useTranslations } from "next-intl";

export default function Page({}: {}) {
  const t = useTranslations("strapi");
  return (
    <>
      <h2>hi</h2>
      <h1>{t("HomePageTitlePartTwo")}</h1>
    </>
  );
}

It works perfectly in dev mode. But as soon as I statically export it gives a 404 when even trying to go to the page. I've tried plating with the localeprefix but that doesn't seem to make a difference. So I'm kinda lost what the next steps are. Any help or advice is appreciated.

[amannn]

From a first look it seems like the issue is that you're not using a setup with or without i18n routing consistently (see also: Unable to find next-intl locale because the middleware didn't run on this request)

If you're using the [locale] segment you should read the locale from the params that are passed to the function in getRequestConfig.

[KieranMarien]

Thanks for the reply, but I still can't figure it out. I feel I've tried most things but can't get it working when exporting it statically... If I build normally or in dev it works.

If I just follow the i18n routing in the documentation. I'm not sure what steps apply to both dynamic and static and what steps are just for dynamic. Correct me if I'm wrong here but I believe I shouldn't be using middleware in a statically exported application. But I'm not sure if I have to compensate for that?

Do you maybe have an example of a static export site I could take a look at?

Thanks in advance!

[amannn]

Are you referring to statically rendered pages or are you looking for a completely static export (output: 'export')?

The App Router with i18n routing example is set up for static rendering. It also works with output: 'export' (with the one minor modification that you remove the catch-all not found route).

I'd have a look there and compare your implementation! See also the static export section in the docs (if that's what you're looking for).