Pre-Render the post page

[00:00 - 00:09] Prerender post page. First we need to create an API endpoint to get the data for a single post. Open server index.ts and import the post type.

[00:10 - 00:40] Impert post from shared types. Then define an endpoint to get a single post. Up . Get posts ID. Here we've added a named ID segment. We'll receive request and response like in all the endpoint functions. We get the wanted ID const wanted ID is a string that we create from request params ID. Then we get the post with this ID post equals posts.

[00:41 - 01:17] Find we try to find the post by ID by comparing the string ID with the wanted ID. When we found the post we return res JSON and we pass in the post. So this new endpoint posts ID extracts the ID of requested post searches the post in the posts list and returns what it found as a JSON. Now create API post TS with the following content expert pacing function fetch post.

[01:18 - 02:38] This function receives ID of type entity ID and returns the promise of type post. Inside of it we will get the response await fetch and by the way we'll need to import fetch from node fetch because this file is going to be executed in the node environment and we fetch the address that we get from config base URL plus posts and the post ID. After we got it we return await res JSON. The problem here is that we'll get a TypeScript error. So we'll need to cast the JSON to promise of type post. All right. Now we have the fetch post function that takes entity ID of a post and returns a promise of a post static props and static paths on the post page open post IDTSX and define the post props type post props. Since it will accept the data via props we'll need to declare the post prop here of post type import post as post type from shared types. We have to rename the post type here to avoid the name clashes with the post page.

[02:39 - 08:00] Now let's define the get static props method expert const get static props the type is get static props of post props import this type from next it's going to be an async function that will receive the params and then we'll be able to calculate the props if type of params ID is not a string then we throw new error unexpected ID ID should always be a string in our application const post equals await fetch post from params ID. So if it was a string then everything is fine we can call the fetch post that we've defined in the API import it from the API and now return an object where field props is an object with field post. All right so here basically we check if it's a string because otherwise it could be an array of strings and we only want to process the individual IDs. We import get static props from next to declare this function argument types and the return result we pass a context object as an argument to this function it contains the params object with route parameters for pages that use the name crowds since our page has a dynamic segment ID you can see it in the name this object will have an ID property with the value equal to the ID of the current post which will use to fetch the data using the fetch post method static paths there is another exported function get static paths this function will determine which paths should be rendered to HTML at build time let's define it expert async function get static paths here we return an object with the paths and fallback true we'll get the paths from the shared static paths module we'll have to rename post paths to paths to use it here inside of the shared folder create a new file call it static paths dot ts here we import entity ID from types we define the type post static params it's going to contain ID of type entity ID it's going to have type post static path it will have params of type post static params next we define the list of post IDs const static posts ID list it's going to be entity ID array and it's going to be array with numbers from one two three up to nine and finally we expert post paths it's going to be post static path array and we get it using static posts ID list map and for each ID we're going to return an object with params ID equals string ID all right now go back to the post page pages post ID tss and we can update our post component now we get the router from router if router is fallback then we return a loader otherwise it will return a post body with post from the props here we get it from the props and we define props as post props now let's define the loader and the post body components the loader component will just display a message that says loading inside of the components create new folder loader and there define a loader component loader tss it's going to use a container from the styles and render the loading text let's define the styles for it new file style tss here we import styled from the styled components and define the container as a style div with font family from the accent font of the theme now define an index file index tss and re-ex pert everything from the loader expert everything from lorter and inside of the post folder define the post body component new file post body tss and the styles for it new file post body style tss you can copy the styles for this component from the folder attached to this lesson and then for the post body we'll define it as a functional component that receives a post it renders the post title image from the post image field we wrap it into a figure component from the post body style and we render the content using the dangerously set inner html and a bunch of meta fields we use dangerously set in a rich html for simplicity since our posts have html markup and their content fields we're under them right away in a real world application we should consider text pre-processing to avoid excess and other security vulnerabilities the meta field contains a bunch of additional data about the post and it's going to be rendered below the main post content the date category and the source if you open the app you should see the post rendering correctly you should have the category link the source and the current date along with the post content and the image