Error: Usage of next-intl APIs in Server Components currently opts into dynamic rendering

Question

I'm building a website with Nextjs (14.2.3) and next-intl ("^3.14.1"), encountering buildtime 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

Some people have encountered the similar problem before: https://github.com/amannn/next-intl/issues/521

So I call unstable_setRequestLocale function in most of the layout.tsx and page.tsx, like the snippet below:

import React from 'react';
import { unstable_setRequestLocale } from 'next-intl/server';
import AboutPage from '@/layout/AboutPage';

interface AboutPageProps {
  params: {
    locale: string;
  };
}

const Page: React.FC<AboutPageProps> = ({ params: { locale } }) => {
  unstable_setRequestLocale(locale);
  return <AboutPage />;
};

export default Page;

It solved the most of the errors, except I got this last error as the same as the former and I couldn't figure out how to solve this...

> Export encountered errors on following paths:
/page: /

This is the current directory is like:

├── messages
│   ├── en.json
│   └── ...
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        ├── layout.tsx
        ├── page.tsx
        └── [locale]
            ├── layout.tsx
            └── page.tsx

And this is the code snippet in the /app/layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return children;
}

I guess this is where it goes wrong, I've tried to call unstable_setRequestLocale function here but it would cause more errors. I even tried to downgrade the Next.js version to 14.0.3, but I get the same problem.

I have no idea how to solove this, hoping if anyone has the solution. Many thanks in advance!

MemFree · Accepted Answer · 2024-09-04 06:09:43Z

1

Yesterday I also encountered the issue of Usage of next-intl APIs in Server Components Currently Opts into Dynamic Rendering I solved it by using unstable_setRequestLocale. I wrote a blog post summarizing it and the code has been open sourced.

interface PostPageProps {
params: {
    slug: string[];
    locale: Locale;
};

}

export async function generateStaticParams(): Promise<
PostPageProps['params'][]> {
const locales = routing.locales;
return allPosts.flatMap((post) =>
    locales.map((locale) => ({
        slug: post.slugAsParams.split('/'),
        locale: locale,
    })),
);

}

export default async function PostPage({ params }: PostPageProps) {
unstable_setRequestLocale(params.locale);
const post = await getPostFromParams(params);

https://www.memfree.me/blog/nextjs-integrate-next-intl

answered Sep 4, 2024 at 6:09

MemFree

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error: Usage of next-intl APIs in Server Components currently opts into dynamic rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related