Next.js 13中generateStaticParams与not-found是否不兼容？

当使用generateStaticParams()时，Next.js 默认会在构建阶段生成所有匹配的静态路由。对于不在generateStaticParams()返回的参数列表中的路由，Next.js 不会触发页面组件的渲染，而是直接返回框架默认的404页面，这就导致你页面组件里的notFound()调用根本没机会执行。

这两个函数并非不兼容，只需调整配置并补充页面逻辑即可实现自定义404：

1. 开启dynamicParams选项 #

在你的页面组件文件（比如app/posts/[postId]/page.tsx）中，添加dynamicParams配置，允许未预先生成的路由触发动态渲染：

export const dynamicParams = true; // 关键配置

2. 在页面组件中添加数据校验与notFound()调用 #

即使构建时生成了静态路由，也要在页面组件中校验参数对应的资源是否存在（避免构建后数据更新导致的无效路由），不存在则调用notFound()：

import { notFound } from 'next/navigation';
import { PostsData } from '@/lib/data'; // 假设你的数据函数路径

export const dynamicParams = true;

export async function generateStaticParams() {
  const posts = await PostsData();
  return posts.map((post) => ({
    postId: post.id,
  }));
}

export default async function PostPage({ params }: { params: { postId: string } }) {
  const posts = await PostsData();
  const post = posts.find((p) => p.id === params.postId);

  // 校验资源是否存在，不存在则触发自定义404
  if (!post) {
    notFound();
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

3. 确保自定义not-found.tsx存在 #

在对应的路由层级（比如app/posts/not-found.tsx或根目录app/not-found.tsx）创建自定义404页面：

export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-4xl font-bold">404 - 页面未找到</h1>
      <p className="mt-4">你访问的文章不存在</p>
    </div>
  );
}

• 开启dynamicParams: true后，当用户访问不在generateStaticParams()生成列表中的路由时，Next.js 会动态渲染页面组件，此时页面里的notFound()调用会生效，引导用户到自定义404页面。
• 保留generateStaticParams()可以继续预先生成已存在的路由，提升访问性能；同时页面内的校验逻辑也能处理构建后数据更新导致的无效路由。

内容的提问来源于stack exchange，提问作者Aaron Marsden