Clean Up and Deploy a Next.js 13 Application Powered by the App Router
There are a handful of errors we will run into when we try to redeploy our application now that it is utilizing the app router.
After those errors are handled and now that we have moved everything from our pages router to app router and added new features like server actions and experimental hooks we can redeploy our application.
Instructor: [0:00] Now that we're ready to redeploy our application, there are a few things that we're going to run into. If you run npm run build, you'll get a list of errors. One of them is, if we look down, if you notice here, I'm getting an error that this directive is unused.
[0:14] That's because I have now installed the latest versions of the types for React and ReactDOM, as well as the latest version of TypeScript. Once you do that, you should get the error that I got, the ts-expect-error, directive is unused.
[0:30] If you don't, and you still get the red squiggly under Customers saying that there's an error for this Customers component, you may need to restart Visual Studio Code or update to the latest version of Visual Studio Code.
[0:42] Then the other thing that we need to look at is on our page here. If we scroll down where we are getting our Customer data, the way that Next.js handles fetching data is that, if you don't explicitly state that this is dynamic, it will treat this as static data. This means that whenever you add a customer, you'll have to rebuild your application to get the most up-to-date data.
[1:02] Here, we can add export const dynamic, and we'll set it equal to "force-dynamic". Then the last thing that you'll need to do is, in these pages where we are returning the children, we're not actually using the children. The problem we are running into is that, in our page, if we didn't have the page itself, we would get the 404.
[1:21] We wanted to return a slot for the pages underneath, but our layout is serving as that slot with the children there. Here, all we need to do is return null. If you don't return something here, you'll still get the 404. We can set this to null.
[1:34] Now, your job is to go through and make sure you have all of these things up to date. Make sure any pages that are returning children return null, anywhere you're fetching data, set it to force-dynamic, then on layouts where you're using the getServerSession, make sure you are also adding this dynamic directive.
[1:51] Otherwise, you'll get errors with your build as well because we're trying to dynamically check for a session. The last thing for you to know before you push your code to GitHub and deploy your application again is that, if you want to check and make sure your code matches up with the solution, you can check out to the solution branch.
[2:08] All you need to do is, run git checkout solution, and then you'll see a solution folder with the finished code. Now you can push to GitHub. Then if we come back to Vercel, now we can go to our application again. Now we can try to go to our Sales route. We need to sign in. We can sign in with GitHub. It may take you through the authorization process with GitHub OAuth.
[2:30] We can come back to Sales, Customers. We can see our Customers, and then we can go to our Invoices. We can see that we've paid this one, but let's add another one to make sure we're getting our pending UI and our optimistic updates, then create. We get our pending UI and our optimistic update. Now, our application has been fully moved from the pages router to the app router.