How to statically render dynamic pages using next.js, such that the dynamic pages data is not available during build time?

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