Next.js分页加载后详情页出现404错误求助

可能的原因及对应解决方案 #

1. 静态生成路径未覆盖分页内容

如果你的详情页用了getStaticPaths（Pages Router）或generateStaticParams（App Router）预生成静态页面，但只生成了第一页文章的路径，后续分页的文章路径没被包含，就会触发404。

解决方案：

• Pages Router：修改getStaticPaths，要么拉取所有分页的文章slug生成路径，要么设置fallback: true/fallback: 'blocking'，让Next.js动态生成未预加载的页面：

// 详情页 [slug].tsx
export async function getStaticPaths() {
  // 方式一：拉取所有分页的文章（适合数据量不大的情况）
  let allPosts = [];
  let page = 1;
  let hasMore = true;
  while (hasMore) {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/posts?page=${page}`);
    const posts = await res.json();
    if (posts.length === 0) hasMore = false;
    else {
      allPosts.push(...posts);
      page++;
    }
  }
  const paths = allPosts.map(post => ({ params: { slug: post.slug } }));

  // 方式二：用fallback动态生成
  return {
    paths, // 可以只生成第一页，剩下的靠fallback处理
    fallback: 'blocking', // 访问时动态生成，不会显示加载态
  };
}

• App Router：在详情页的generateStaticParams中拉取所有分页的文章slug，或者直接用动态渲染（不预生成）：

// app/posts/[slug]/page.tsx
export async function generateStaticParams() {
  let allPosts = [];
  let page = 1;
  let hasMore = true;
  while (hasMore) {
    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/posts?page=${page}`);
    const posts = await res.json();
    if (posts.length === 0) hasMore = false;
    else {
      allPosts.push(...posts);
      page++;
    }
  }
  return allPosts.map(post => ({ slug: post.slug }));
}

2. 加载更多的文章数据ID/Slug错误

检查LoadMore.tsx中获取的分页数据，确认返回的文章slug/ID和初始加载的格式一致，没有拼写错误、缺失或者格式差异（比如大小写不一致）。

检查点：

• 在LoadMore.tsx的请求回调中打印返回的新文章数据，确认slug字段正确：

const fetchMorePosts = async () => {
  const res = await fetch(`/api/posts?page=${currentPage + 1}`);
  const newPosts = await res.json();
  console.log('加载更多的文章数据：', newPosts); // 检查slug是否正确
  setPosts(prev => [...prev, ...newPosts]);
}

• 确认results.tsx中链接的路由拼接正确，比如：

<Link href={`/posts/${post.slug}`}>{post.title}</Link>

避免出现/post/${post.id}这种和详情页路由不匹配的情况。

3. 详情页数据预取逻辑错误

如果详情页的getStaticProps/getServerSideProps（Pages Router）或页面组件的数据请求（App Router）没有正确处理路由参数，导致查询不到对应文章，也会返回404。

解决方案：

• Pages Router：确保getStaticProps正确接收params并查询对应文章：

export async function getStaticProps({ params }) {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/posts/${params.slug}`);
  const post = await res.json();

  // 如果查询不到文章，返回notFound: true（但正常应该确保slug正确）
  if (!post) {
    return { notFound: true };
  }

  return {
    props: { post },
  };
}

• App Router：确保页面组件正确获取路由参数并请求数据：

// app/posts/[slug]/page.tsx
import { params } from 'next/navigation';
import { notFound } from 'next/navigation';

export default async function PostPage() {
  const { slug } = params();
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/posts/${slug}`);
  const post = await res.json();

  if (!post) {
    return notFound();
  }

  return <div>{post.content}</div>;
}

4. 客户端路由缓存问题

Next.js的客户端路由缓存可能导致跳转时无法识别新加载的文章路径，可以尝试在加载更多后刷新路由缓存：

// LoadMore.tsx 中加载完成后刷新缓存
import { useRouter } from 'next/router';

const router = useRouter();

const fetchMorePosts = async () => {
  // ... 请求数据逻辑
  setPosts(prev => [...prev, ...newPosts]);
  router.refresh(); // 刷新路由缓存
}

内容的提问来源于stack exchange，提问作者Udemezue John