NX单仓Next.js项目使用next-intl时_not-found.tsx构建失败求助

核心问题分析 #

• 生产构建失败：next-intl v3.0.0-beta.5的Server Components API仅支持动态渲染，而Next.js的_not-found.tsx默认触发静态生成逻辑，两者冲突导致构建报错。
• 改文件名后的副作用：将_not-found.tsx改为not-found.tsx会丢失全局404 fallback功能，未知路由会先返回404状态码再客户端跳转，引发持续的网络404请求。

可行解决方案 #

方案1：强制_not-found.tsx使用动态渲染 #

在_not-found.tsx文件顶部添加Next.js的动态渲染指令，跳过静态生成流程，适配next-intl的限制：

// _not-found.tsx
export const dynamic = 'force-dynamic';

// 你的组件代码（使用next-intl API）
import { useTranslations } from 'next-intl';

export default function NotFound() {
  const t = useTranslations('NotFound');
  return <div>{t('message')}</div>;
}

这样既能保留_not-found.tsx的全局404 fallback功能，又能让next-intl API正常运行，生产构建可成功，同时不会产生多余的404网络请求。

方案2：升级next-intl版本 #

检查next-intl的官方更新，如果后续beta版或正式版已支持Server Components的静态渲染，直接升级到对应版本即可解决构建冲突，无需修改现有代码结构。

为什么改文件名会失效？ #

Next.js路由规则中：

• _not-found.tsx是全局404 fallback页面，当路由匹配失败时直接返回该页面，状态码为200（或根据配置调整）。
• not-found.tsx是局部路由段的404页面，仅作用于当前路由分支，全局路由匹配失败时会先返回404状态码，再客户端跳转到该页面，因此会产生网络404请求。

内容的提问来源于stack exchange，提问作者Sanira Liyanage