Next.js 静态生成时怎么处理动态路由的数据获取？

奕冉~ 提问于 2026-03-04 23:54:23 阅读 9

框架

我在用 Next.js 做一个博客，文章页是动态路由 /posts/[id].js，想用 SSG 静态生成，但不知道怎么在 getStaticProps 里拿到具体的 id。文档说要配合 getStaticPaths，但我试了还是报错。

我之前用 Vue 写类似功能是这样处理的：

<template>
  <div>{{ post.title }}</div>
</template>

<script>
export default {
  async asyncData({ params }) {
    const post = await fetchPost(params.id)
    return { post }
  }
}
</script>

Next.js 里是不是也得提前把所有 id 列出来？那如果文章很多岂不是每次构建都要拉全量数据？

Next.js React框架全栈开发

我来解答赞 3 收藏

反馈

1 条解答

皇甫含平 Lv1

啊这个问题我也踩过坑，Next.js的SSG处理动态路由确实有点绕。一般这样处理：

首先你得在动态路由页面里同时用getStaticPaths和getStaticProps。重点来了：

1. getStaticPaths要返回所有可能的id列表，比如：

export async function getStaticPaths() {

  const res = await fetch('https://your-api.com/posts')

  const posts = await res.json()

  

  const paths = posts.map(post => ({

    params: { id: post.id.toString() }

  }))



  return { paths, fallback: false }

}

2. 然后在getStaticProps里就能拿到这个id了：

export async function getStaticProps({ params }) {

  const res = await fetch(https://your-api.com/posts/${params.id})

  const post = await res.json()



  return { props: { post } }

}

你担心的问题确实存在 - 如果文章很多，构建时会拉取所有数据。有两个解决办法：
1) 如果内容不常更新，用增量静态生成（ISR），加个revalidate参数
2) 或者用fallback: true，首次访问时才生成页面

我上次项目用ISR解决的，这样构建时不用拉全部数据：

return {

  props: { post },

  revalidate: 60 // 60秒后重新验证

}

说实话Next.js这套API设计比Nuxt的asyncData复杂点，但用习惯了还行。

2026-03-05 09:15