next-intl导致_not-found页面构建报错，求解决方案

报错详情 #

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

Export encountered errors on following paths:
        /_not-found/page: /_not-found

已完成配置 #

已按照next-intl相关文档要求创建两个404页面：

• app/[locale]/not-found.tsx
• app/not-found.tsx

问题代码定位 #

推测报错由app/[locale]/layout.tsx中的静态参数生成逻辑导致：

// app/[locale]/layout.tsx
export const generateStaticParams = () => {
  return ["en"].map((locale: string) => ({ locale }));
};

复现步骤 #

• 打开目标项目
• 启动终端
• 执行命令 yarn build
• 查看控制台输出的报错信息

解决方案 #

要解决静态渲染与next-intl Server Components API的冲突，需通过unstable_setRequestLocale API启用静态渲染适配，具体调整如下：

1. 修改app/[locale]/layout.tsx，引入并调用unstable_setRequestLocale：

import { unstable_setRequestLocale } from 'next-intl/server';

export default function LocaleLayout({
  children,
  params: { locale }
}: {
  children: React.ReactNode;
  params: { locale: string };
}) {
  // 为当前请求指定locale，允许静态渲染
  unstable_setRequestLocale(locale);

  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}

export const generateStaticParams = () => {
  return ["en"].map((locale: string) => ({ locale }));
};

2. 调整根目录app/not-found.tsx，避免直接使用next-intl的Server端API，改为重定向到指定语言的404页面：

// app/not-found.tsx
import { redirect } from 'next/navigation';

export default function NotFound() {
  // 重定向到默认语言的404页面
  redirect('/en/not-found');
}

完成以上调整后，重新执行yarn build即可成功完成静态构建。

内容的提问来源于stack exchange，提问作者Tiavina MIchael