Leverage Next.js' getInitialProps lifecycle hook to load individual posts
In this lesson, we’ll continue scaffolding out the page responsible for display each blog post (/blog/:id). Specifically, we’ll leverage Next.js’ getInitialProps lifecycle method to grab the specific id for the blog post and see how we can pull this value out of the query object defined within our custom server.
Instructor: [00:01] Inside of our post.js file, we're going to destructure the context parameter of this lifecycle hook so we can pull of the ID off of the query object that this page is going to receive. Once done, I'm going to create this response variable like we did in the index.js file.
[00:22] Now, we're going to need the isomorphic-fetch library to perform our API call, so we need to import that. I'm also going to grab the card components from the material UI library so we can display our posts in a neat little manner. Inside our fetch call, we need to leverage the ID that we're receiving by adding it to our API call like so.
[00:44] This will allow us to display each blog post individually. Below our fetch call, I'm again going to create a data constant and set it equal to the value of response.json. Now the last thing I'm going to do is create these title and content constants which will pass directly into our component as prompts.
[01:08] Now, the blogger API is going to give us the content of our post inside of data.content as well as the title inside of data.title. We can assign them to our constants like so. Then finally, we're going to return them, which will make them available to our component as props. Now that we're all set up, let's pass in title and content into our component.
[01:35] Now inside of our component, we're going to again scaffold out a card. However, this time it's going to hold all of the content for our blog post. We're setting title just like we did inside of index.js. Below this, we see me using React's dangerouslySetInnerHTML DOM element to pass in the markdown that I'm receiving from Blogger into my application.
[02:03] I should point out that you should be careful when using this DOM attribute. It's not necessary for you to use it in this case. My content is coming to me as a markdown, and it's going to display nicely on the page. To cap this, I'm going to import the raised button component as well as next link component and add some links that will take the user back to the blog page.
[02:28] Inside our link components, we're using the href and as attributes again. This time, though, we're passing in the index route as the href value and giving the as attribute the value of blog. Finally, I'm wrapping go back to blog in a tags. We're ready to check out the application.
[02:50] Now, if you take a look at your application, you should see the content you're receiving from Blogger appearing on the page. In my case, I have different assets such as these code examples as well as regular images, all of which are being rendered neatly to the page. We'll also see that button at the bottom of each post which is allowing us to navigate right back to our main route located at /blog.