Build a Page Template for a Dynamic Page in Next.js 13
Now that we have single post data loading on our dynamic page, let's build a template for the page to make it look better. We'll utilize more of the pre-built components that came with the template to the layout.
We'll also use Next.js Link Component to link back to the home page.
You can check out the components folder to gain a better understanding of the styles that are being applied to the page.
Instructor: [0:00] Now that we have our dynamic page working and opening up specific data, next up, we want to change up the template design of our dynamic page. We'll start by importing a bunch of components. I'll copy and paste the components to save time.
[0:15] To start, we'll navigate and see "Brown and Agile Child." We'll get rid of our main and title in our page container and replace that with left grid and we'll place a right grid as well. Inside our right grid, we'll use our centered component to center our content, and we'll paste our content component inside.
[0:45] Inside our content component, we'll place posts.attributes.body. When we refresh, we can see the right side of our screen has our page body.
[1:01] Now, for our left grid. In our left grid we'll say centered, and inside centered we'll create a title. Inside our title, we'll have our post.attributes.title. That we'll paste the title.
[1:18] Below title, we want to have a description, and so we'll go into our list component and copy our <p> tag. We'll go back into our dynamic page and paste our <p> tag and replace the p with description. We'll copy that and paste it here. Notice, we need to change posts to post to match the post that we defined.
[1:46] We have reformatDate also which we need to copy from our list component, and so we'll copy this function and paste it in our page here and save. When we save, we have our description that says, "Brown and Agile Child by Pablo Neruda, on May 4th."
[2:05] Below our description, we also want to have a back component that helps us navigate back to our home page. Inside that we use Link component and say Left Arrow, and type "Go Back Home." We'll add an href to our link component. Let's say href Home. We need to import our Link component, Link from 'next/link'.
[2:39] Now, when we click Go Back Home in our browser, we get redirected back to our home page. That is how you create a template for a Next.js dynamic page.