Build a Template for Dynamic Pages
Now that we can query for the data and have it set up dynamically, we need to create a template page that will have our post data.
In the [slug].js file, we will add in our imports and create a function called Blog. In this function, we will render out a header that will have the title, author, and a link back to the home page. And lastly, we will render out the body of our post.
The last think we will want to do is add in some styling which you can get from the github link below.
Instructor: [0:00] just format that. [0:03] At the top of our page, we'll import a couple items that are useful. We'll get these from our index.js file because they're pretty much the same. We'll get all of these and paste them in our slug.js.
[0:17] We'll also import all as React from React and change this, so that we query from the right source as well as styles and get rid of the BlogList component as we will not use it. Now we instantiate a blog function with export default function blog. Inside that, we pass posts. We again add the reformat date function, which we used in our blog component. I will copy that function and paste it in our slug.js and then, of course, our return.
[1:23] Inside our return, we'll start off by defining ideas. Inside that div, we'll get our head section from index.js as it will be useful. We'll copy that and go back to our slug and paste that in. We get rid of link and meta as well as our create-next-app text. What we'll do here is we'll replace this with posts.attributes.title so that the tab section in our browser shows the title of our blog post.
[2:08] After head, we'll define our main section. In that we'll start with a div. This will represent one part of our blog. We'll add another div in that. Inside this div, we'll create an H1, an H1 tag. This H1 tag will house our post title. We'll add that right below our H1.
[2:44] We want to have a P tag that will have the author name, .author and below that P tag, we'll have another P tag that has a link for us to go back home. We'll say, left arrow and say go back home. Of course, we add an href to our link. Let's close that.
[3:22] We did not define link and so we'll replace image here with link. We have go back home at the end of our second div. We want to define another div here. This will actually house the body of our posts, and inside we'll create a P. Then have that say post.attributes.body, and then save this.
[4:05] Let's refresh our application. We notice that our data is being displayed. All of our styling is off, however, and so we'll open our home module.css file, close that and paste in some styling that we'll use later on. I will paste in these classes at the end of the file. Then go back into slug.js.
[4:39] Starting with our main, we'll say class name is equal to styles., just copy that for the rest, styles.mainblog. The div below that it has a special format. Actually styles.split/styles, just close this, .left. Then join those two. The next div will have styles.centered. H1 will have standard title. The P tag below that will have styles.descriptionleft. Then I'll back link there. We'll have .back.
[5:52] The div tag here will have styles.centered. The one above will have...We need to join that. We join styles.split and styles.right. This makes more sense in full screen.
[6:32] If we full screen this it makes way more sense. We seem to have forgotten styles.main container blog on the main...
[6:50] That is how you build a template for your Next.js dynamic pages.