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

Question

According to the current docs of next.js, dynamic routes are handled by providing the route data to getStaticProps and getStaticPaths .

What concept will enable me to implement dynamic routes with or without using getStaticProps() and getStaticPaths() , when the route data is being fetched from a database during build time?

Answer 1

You are correct. You'll use getStaticPaths / getStaticProps to fetch data from your database. Then, you forward props to your React component (with getStaticPaths ) and generate the routes you want (with getStaticProps ).

For example, let's say you have a file blog/[slug].js .

If you visit /blog/first , that will forward the variable first as a parameter to getStaticPaths / getStaticProps as slug . You can then use that value to fetch information about the given post (or anything else in your database).

Example:

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