NextJS动态SSG页面构建报错：缺失getStaticPaths，如何解决？

错误原因 #

你遇到的这个错误，是因为当前页面是动态路由页面（比如文件名是[id].js、[slug].js这类带方括号的文件）。当这类页面要通过getStaticProps实现静态预渲染（SSG）时，Next.js必须知道要预渲染哪些具体的动态路径，所以要求你同时定义getStaticPaths方法来指定这些路径。

解决方案 #

根据你的业务场景，分两种情况处理：

情况1：提前知道所有需要预渲染的路径

如果能从API获取到所有动态路径的参数（比如所有文章的slug、商品的ID），可以直接在getStaticPaths里拿到这些参数，生成预渲染路径列表，再配合getStaticProps获取对应数据。

示例代码（以pages/posts/[slug].js为例）：

// 定义需要预渲染的所有动态路径
export async function getStaticPaths() {
  // 调用API获取所有文章的slug列表
  const res = await fetch('https://api.example.com/posts')
  const posts = await res.json()

  // 生成符合要求的paths数组，格式为 { params: { slug: '具体路径值' } }
  const paths = posts.map(post => ({
    params: { slug: post.slug }
  }))

  // fallback: false 表示只预渲染paths里的路径，其他路径直接返回404
  return { paths, fallback: false }
}

// 根据当前路径参数获取对应数据
export async function getStaticProps({ params }) {
  // 用路径里的slug调用API获取单篇文章数据
  const res = await fetch(`https://api.example.com/posts/${params.slug}`)
  const post = await res.json()

  return {
    props: { post }, // 把数据传给页面组件
    revalidate: 60 // 可选：开启增量静态再生，每隔60秒自动更新页面内容
  }
}

// 页面组件
export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </div>
  )
}

情况2：无法提前获取所有路径（内容动态新增）

如果你的内容会动态新增（比如用户生成的内容），没法提前拿到所有路径参数，可以设置fallback: true或fallback: 'blocking'，让Next.js动态生成未预渲染的路径页面：

• fallback: true：未预渲染的路径会先返回加载状态，后台异步生成静态页面，下次访问直接返回生成好的页面
• fallback: 'blocking'：未预渲染的路径会在服务器端生成页面后再返回给用户，之后会缓存该页面

调整后的getStaticPaths示例：

export async function getStaticPaths() {
  // 先预渲染部分热门路径，比如前10篇热门文章
  const res = await fetch('https://api.example.com/posts?sort=hot&limit=10')
  const popularPosts = await res.json()

  const paths = popularPosts.map(post => ({
    params: { slug: post.slug }
  }))

  // 允许未预渲染的路径动态生成
  return { paths, fallback: true }
}

注意事项 #

• 动态路由页面使用getStaticProps时，必须同时定义getStaticPaths，二者缺一不可
• fallback的选择要匹配业务：如果内容稳定不新增，用fallback: false；如果内容动态更新，用true或blocking
• revalidate参数可以实现增量静态再生，不用重新构建整个项目就能更新页面内容

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