Updating pages
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:11] Updating pages. When the client requests are ready, we can replace the old request functions with them. This will allow us to remove the old API, use API routes, and deploy the project to Vercel using serverless functions.
[00:12 - 00:22] Let's review what pages use any APIs and what we need to replace. The main page fetches the categories and the posts. The post page fetches the post and its comments.
[00:23 - 00:45] Also the post page can submit a new comment for the post and the category page loads the posts for the category. Updating the main page. On the main page, we need to replace the old imports from API summary with a new one. Now we get them from the request. Instead of get static props, we're going to use get server side props now.
[00:46 - 01:03] On the category page, we're going to use fetch category from request. We'll use get server side props. We'll need to update the type here as well. Get server side props. Don't forget to import it.
[01:04 - 01:18] Instead of fetch posts, we now use fetch category and the rest of the code stays the same. Now let's update the post page, post ID. Here we want to import fetch post and fetch comments from the request module.
[01:19 - 01:33] Remove the old fetch post and fetch comments. This page was already using get server side props. So we don't need to update anything else. Open the comment form and update the submit comment import so that it comes from the request module.
[01:34 - 01:49] Now let's clean up the code a little bit. Cleaning up. When we've migrated to the API routes, we can safely delete the obsolete code. For example, we don't need the API directory so we can remove it completely. We also don't need shared static paths. Delete it as well.
[01:50 - 02:15] And also we don't need server index.ts. Remove it. If you open package JSON, then here we can remove body parser concurrently, course, express, node fetch and ts node. We can also clean up the scripts. Dev can just call next and we can remove the serve. Congratulations, our project is ready to be deployed.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)