Generate Static Pages From Keystatic Entries With generateStaticParams in Next.js 14
In this video, you'll add a generateStaticParams function in the individual author page, so that a static HTML page is generated at build time, so we can access those on Vercel.
[00:00] We're in the individual author page here and we're going to generate static parameters for each author so that Next. Js can generate a static HTML page for each. For each author, the parameters we need is the slug, which is the author slug as a string. So I'll scroll to the bottom of the page. And here we're going to export an [00:19] async function called generate static params. So we want to grab all the author slugs, const author slugs equals, and we have our reader here that we use already in the page. So await reader dot collections dot authors dot list. And list gives [00:39] us an array of strings which are the slugs for each author, which is perfect. We need this generate static params function to return an array of params objects. And so here, we can return. So let's map over these author slugs. And for each author slug, we're going to return [00:59] an object. Let's do an implicit return slug author slug. And so with that in place, when we build the Next JS site, this generate static params function will run and generate a static HTML page for each slug or each author. So let's try and run the build locally, npm [01:19] run build. And we should be able to see the breakdown of what pages are generated statically or dynamically. And, yep, here you go. You can see that now the author's pages have been generated as pre rendered static HTML and we have Jed and Simon. So I will quickly commit this change and I'll push these changes [01:38] which is going to trigger a new build on Vercel. So let's go check it out. Yep. There it is. It's building right now. And so what we're hoping is now well, we actually know because we tried locally, but we just wanna verify that the Jed and Simon author pages are generated statically, which they are. And so, we should be [01:58] able to access these pages now on the deployed front end. Here's the live URL once again. And so, I'll visit the first post and then go and try to visit Simon or Jed's page and hopefully it is available. And, yep, it is with the showcase and let's also verify that Jed's page is working and sure enough [02:19] it is.