Next.js中如何用getStaticProps结合fallback预渲染前50篇博客（无需枚举路径）

针对你的需求，这里提供两种正确的实现方式，取决于你的posts或postFilePaths的结构：

方式一：从已解析的帖子数据数组中提取前50个slug #

假设你已经通过文件读取并解析了所有MDX帖子，得到了包含元数据的posts数组（每个元素包含data.slug字段）：

export const getStaticPaths = async () => {
  // 截取前50篇帖子，提取每篇的slug
  const preRenderedSlugs = posts.slice(0, 50).map(post => post.data.slug);
  
  // 转换为Next.js要求的paths格式
  const paths = preRenderedSlugs.map(slug => ({
    params: { slug }
  }));

  return {
    paths,
    // 使用fallback: 'blocking'：首次访问未预渲染页面时，服务端渲染并缓存静态文件
    // 若用fallback: true：先返回空白页，客户端异步加载数据并生成静态文件（适合需要快速首屏的场景）
    fallback: 'blocking'
  };
};

方式二：直接从文件路径数组中处理前50个路径 #

如果你的postFilePaths是存储所有MDX文件路径的数组，可直接截取前50个路径处理：

export const getStaticPaths = async () => {
  // 截取前50个MDX文件路径
  const preRenderedFilePaths = postFilePaths.slice(0, 50);
  
  // 移除文件后缀，转换为slug并生成paths结构
  const paths = preRenderedFilePaths.map(path => {
    const slug = path.replace(/\.mdx?$/, "");
    return { params: { slug } };
  });

  return {
    paths,
    fallback: 'blocking'
  };
};

关键说明 #

你之前的错误在于直接对posts.slice(0,50)（这是一个数组）访问data.slug，数组本身没有这个属性，必须遍历数组中的每个帖子对象来提取slug。

内容的提问来源于stack exchange，提问作者jonas-dev