unstable_setRequestLocale and generateStaticParams do not produce an HTML page during the build process #819

ilikali · 2024-01-24T19:17:19Z

ilikali
Jan 24, 2024

Description

Hello. The package is wonderful, but I am encountering some issues with unstable_setRequestLocale and generateStaticParams. I have a page located at [locale]/help/[slug]/page.tsx and I'm attempting to generate static pages during build time. It appears to be functioning correctly, but the generated .html files are not present in the .next/server/app folder. In fact, there are only empty folders.

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/sandbox/next-intl-bug-template-app-forked-34v6cp

Reproduction description

Here is page.tsx:

import serverStatic from "@/services/server-static";
import { unstable_setRequestLocale } from "next-intl/server";

const locales = ["default", "ru"];

export async function generateStaticParams({
  params: { locale },
}: {
  params: { locale: string };
}) {
  const response = await serverStatic(
    `${locale == "default" ? "/az" : "/ru"}/faq`
  );
  const data = await response.json();
  const slugs = data.items.flatMap((item: { slug: string }) => {
    return locales.map((locale) => ({
      locale: locale,
      slug: item.slug,
    }));
  });
  return slugs;
}

export default async function Item({
  params: { locale, slug },
}: {
  params: { locale: string; slug: string };
}) {
  unstable_setRequestLocale(locale);
  return <>PAGE CONTENT</>;
}

Here is .next/server/app

As you can see folders are empty

Expected behaviour

Here is example folder structure from Next.js template using generateStaticParams

Thanks in advance

amannn · 2024-01-29T07:00:57Z

amannn
Jan 29, 2024
Maintainer

I can unfortunately not run npm run build in your reproduction:

   Collecting page data  ...TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11600:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: getaddrinfo ENOTFOUND urltobacked.com
      at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:118:26)
      at GetAddrInfoReqWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
    errno: -3008,
    code: 'ENOTFOUND',
    syscall: 'getaddrinfo',
    hostname: 'urltobacked.com'
  }

I tried changing generateStaticParams in [locale]/help/[slug]/page to this for a test:

export async function generateStaticParams({
  params: { locale }
}: {
  params: { locale: string };
}) {
  return [
    {
      slug: 'test',
      locale: 'en'
    }
  ];
}

After this, the HTML files are built:

I'll move this to a discussion for the time being since this seems to be a usage question. In case a bug in next-intl can be found, we can still reopen this.

2 replies

wang4621 May 8, 2024

im trying the same thing. but i cant get it to work. i get this 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, see https://next-intl-docs.vercel.app/docs/getting-started/app-router-server-components#static-rendering

how do i statically render other pages?

"layout.tsx"

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

export default function RootLayout({
  children,
  params: { session, ...params },
}: {
  children: React.ReactNode;
  params: { session: any; locale: string };
}) {
  const locale = useLocale();

  // Show a 404 error if the user requests an unknown locale
  if (params.locale !== locale) notFound();

  // Receive messages provided in `i18n.ts`
  const messages = useMessages();
  unstable_setRequestLocale(params.locale);

  return (
    <html
      lang={locale}
    >
      <head></head>
      <body>
          <NextIntlClientProvider locale={locale} messages={messages}>
            <MainWrapper>{children}</MainWrapper>
          </NextIntlClientProvider>
      </body>
    </html>
  );
}

"/src/app/[locale]/quests/[slug]/page.tsx"

export async function generateStaticParams() {
 //some code

  const slugs = quests?.flatMap((quest) => {
    return locales.map((locale) => ({
      locale: locale,
      slug: quest.slug,
    }));
  }) || [];
  return slugs;
}

const QuestLink = async ({
  params,
}: {
  params: { slug: string; locale: string };
}) => {
  let quest;

  // some code

  unstable_setRequestLocale(params.locale);

  if (!quest) {
    return notFound();
  }

  return <QuestDetails quest={quest} />;
};

export default QuestLink;

amannn May 8, 2024
Maintainer

You need to call unstable_setRequestLocale before you call any hooks from next-intl.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

unstable_setRequestLocale and generateStaticParams do not produce an HTML page during the build process #819

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

unstable_setRequestLocale and generateStaticParams do not produce an HTML page during the build process #819

ilikali Jan 24, 2024

Description

Mandatory reproduction URL (CodeSandbox or GitHub repository)

Reproduction description

Expected behaviour

Replies: 1 comment · 2 replies

amannn Jan 29, 2024 Maintainer

wang4621 May 8, 2024

amannn May 8, 2024 Maintainer

ilikali
Jan 24, 2024

Replies: 1 comment 2 replies

amannn
Jan 29, 2024
Maintainer

amannn May 8, 2024
Maintainer