Deploy a Keystatic Project To Vercel

[00:00] We're gonna take this local website, which has currently 2 posts and 2 authors, and we're going to deploy it to Vercel. Here's the GitHub repository for this website. You can see that I have a folder for each video in this series and also have a prod directory, which is the one we're going to deploy for the production app. Here I [00:19] am in my Vercel account and I'm going to add a new project and we're going to import this egghead key static next JS blog. Okay. So here I need to edit the root directory and point to the prod folder and it should detect that it's a Next JS website. And so everything should be good to go to [00:39] deploy. So we're going to let the build do its thing. And while it's finishing the deployment, I'll give you a spoiler alert. Not everything is going to work properly just yet. Alright. So it's deployed and it looks like the screenshot of the homepage has worked. Let's go visit that page. And so now I am on [00:59] the deployed Vercel dot app subdomain, and I can visit the first post. Here it is. Let's go back home and visit the second post. But now let's see what happens when we visit an author. So let's click on Simon. Uh-oh. So what's going on? Looks like the posts are available, [01:20] but the authors are not. And there's a reason for that, and I'll show you why in the code. So if we go in our app site slug and the slug page, which is the individual post page, you can see that we have our component. And at the bottom here, we use this generate static [01:40] params function. That is what will generate static pages for each of the posts based on the slug. If we look at the author's page, we do not have such thing. We just have the component. And so because we're not generating these static params, no HTML page is generated for authors, and so these pages don't exist. If [02:00] we look at the log for the Vercel deployment, you can see that the slug pages here marked with this black bullet, which is pre rendered static HTML. The first and second post were created, whereas for the authors, this is a dynamic server rendered page. And so if the author page is server rendered, why are the authors not found? Well, [02:20] let's try to visit the key static admin UI on the deployed site. And whoops, you can see that we have 0 posts and 0 authors. The key static config is still red and the content types are found, but the content directory, which is our file system locally, doesn't exist on the deployment. And so key static cannot [02:40] find any posts. Right now, key static is set up to use the local storage strategy, which means that it's reading and writing directly on the file system. And the content directory, which is where we've been storing our content locally, well, this directory does not exist on the Vercel deployment instance. And so we [03:00] have two ways of fixing this. The first one is to change key static storage strategy from local to something like cloud or GitHub so that our content reads and writes can be operated directly on the GitHub repo. And the other option, if you ever only want to change content locally and not change modes to GitHub or cloud, is to use generate static [03:20] params on the author's slug page to make sure that each single author is statically generated just like it's the case for the posts. And we'll be covering these two options in the next segments.