如何使用 next.js 静态呈现动态页面，使得动态页面数据在构建期间不可用？

Question

根据 next.js 的当前文档，通过向getStaticProps和getStaticPaths提供路由数据来处理动态路由。

当在构建期间从数据库中获取路由数据时，什么概念将使我能够使用或不使用getStaticProps()和getStaticPaths()来实现动态路由？

Answer 1

你是对的。 您将使用getStaticPaths / getStaticProps从数据库中获取数据。 然后，您将 props 转发到您的 React 组件（使用getStaticPaths ）并生成您想要的路由（使用getStaticProps ）。

例如，假设您有一个文件blog/[slug].js 。

如果你访问/blog/first ，将转发可变first作为参数传递给getStaticPaths / getStaticProps为slug 。 然后，您可以使用该值来获取有关给定帖子（或数据库中的任何其他内容）的信息。

例子：

• https://github.com/vercel/next.js/blob/canary/examples/blog-starter/pages/posts/%5Bslug%5D.js