Next.js中getStaticPaths与动态路由的使用疑问：多板块电影页面跳转404问题求助

你遇到的问题很典型——因为getStaticPaths里只预生成了热门电影的路径，流行电影的ID不在预生成列表里，所以访问时自然会出现404。要解决这个问题，核心思路是把所有可能被用户点击的电影ID都收集起来，统一生成预渲染路径，具体可以这么做：

1. 合并多API数据源的电影ID #

在getStaticPaths中，不要只调用单个板块的API，而是同时调用所有展示板块的API（比如热门、流行），把返回的所有电影ID合并，再去重（避免同一电影在多个榜单里重复生成路径），最后生成完整的paths数组。

2. 合理使用fallback选项 #

考虑到后续可能有新电影上榜，或者用户通过其他方式访问不在预生成列表里的电影，建议设置fallback: 'blocking'（或true），让Next.js在遇到未预生成的路径时，动态生成页面并缓存，避免404。

修改后的[movieId].js代码示例 #

export async function getStaticPaths() {
  const token = "...";
  // 同时调用所有需要展示的板块API
  const [trendingRes, popularRes] = await Promise.all([
    fetch(`https://api.themoviedb.org/3/trending/movie/week?api_key=${token}`),
    fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${token}&language=en-US&page=1`)
  ]);

  const [trendingData, popularData] = await Promise.all([
    trendingRes.json(),
    popularRes.json()
  ]);

  // 收集所有电影ID，并用Set去重
  const allMovieIds = new Set();
  trendingData.results.forEach(movie => allMovieIds.add(movie.id.toString()));
  popularData.results.forEach(movie => allMovieIds.add(movie.id.toString()));

  // 转换为paths需要的格式
  const paths = Array.from(allMovieIds).map(id => ({
    params: { movieId: id }
  }));

  return {
    paths,
    // 设置fallback为blocking，动态生成未预渲染的页面
    fallback: 'blocking'
  };
}

// 单个电影的详情获取，只需要根据movieId调用单电影API即可
export async function getStaticProps({ params }) {
  const token = "...";
  const res = await fetch(`https://api.themoviedb.org/3/movie/${params.movieId}?api_key=${token}`);
  
  if (!res.ok) {
    return { notFound: true };
  }

  const movie = await res.json();
  return {
    props: { movie },
    // 可选：设置revalidate，让页面定期重新生成
    revalidate: 86400 // 24小时
  };
}

关键细节说明 #

• 多API并行请求：用Promise.all同时请求多个板块的API，提升效率，避免串行请求耗时过长。
• ID去重：用Set存储ID可以自动去重，减少不必要的预渲染路径。
• fallback的选择：
  • fallback: 'blocking'：用户访问未预生成的路径时，会等待页面生成完成后再返回，适合对SEO友好的场景。
  • fallback: true：会先返回一个加载状态的页面，后台异步生成页面，适合用户体验优先的场景。
• 扩展兼容性：如果后续新增其他板块（比如Top Rated），只需要在Promise.all里添加对应的API请求，再把ID加入allMovieIds即可，无需大幅修改代码。

这样修改后，不管用户点击哪个板块的电影，对应的路径都已经被预生成（或者能动态生成），就不会再出现404的问题了。

内容的提问来源于stack exchange，提问作者Kaung Khant Zaw