next.jsnext-intl

NextJS static rendering does not work when working with next-int


according to next-intel documentation, we can use setRequestLocale to enable static rendering https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing#static-rendering, but it's not working, i'm trying to apply static rendering to all pages under [locale] path, but when i run npm run build i see all of them are dynamic (server-rendered on demand):

import { NextIntlClientProvider } from "next-intl";
import { getMessages, setRequestLocale } from "next-intl/server";
import { routing } from "@/i18n/routing";
import Header from "./header/Header";
import "./globals.css";


export default async function LocaleLayout({ children, params }) {
  // Ensure that the incoming `locale` is valid
  const { locale } = await params;
  if (!routing.locales.includes(locale)) {
    notFound();
  }

  // Enable static rendering
  setRequestLocale(locale);

  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body className={`${rubik.className} sans-serif`}>
        <NextIntlClientProvider messages={messages}>
          <Header />
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}


Solution

  • I need to add generateStaticParams function for locales:

    export function generateStaticParams() {
      return routing.locales.map((locale) => ({ locale }));
    }
    
    export default async function LocaleLayout({ children, params }) {
    ...
    }
    

    now all my component inside [locale] path are SSG (prerendered as static HTML) which have the same result as static, if i'm not wrong, extremely fast and effective for SEO