Create a BlogList component in Next.js
We'll start by creating a new folder and file components/BlogList.js. This component will be what we use to get data from Strapi as well as the current date to display on our home page.
We will have it display the slug, title, author, and published date with a link to each of the posts. We will also do some styling which will be quickly glossed over as the focus of the lesson is more on the data and not the styling but you can access the styles in the github link below.
Lastly, we'll import our component BlogList to our main index.js file and render it on the page.
Instructor: [0:00] Now that we have our Strapi application connected to our Next.js application, we'll update some of the styling in our Home.modules.css. So, scroll down and start from title, change that and update some of the parameters and save. We get this new color and new format. [0:24] Next up, we'll create a BlogList component to display a list of all our posts from Strapi. In our route, we'll create a new folder called Components. Inside Components, we create a new file called loglist.js. You want to import styles and next link, and so we're going to pages/index.js and copy those imports.
[0:54] We'll get rid of these and replace head with link from next/link. Then define a const called BlogList. Inside that we'll create props called allBlogs.
[1:22] Then define a function called truncateSummary, which we'll use to truncate the response object, and pass function and pass content. Then return content.slice. Then we'll slice the first 100 characters and trim it with the trimEnd method.
[2:05] After that, we'll define another function called reformatDate and pass fullDate. Define a const called Date() and assign that the value of new Date(); fullDate. Then return date.toDateString to convert our date into a string, and then slice that. Perfect.
[3:00] Then we'll return. We'll create a div. Let's close that. Inside this div, we'll map the data from our allBlogs prop into a div with the key post.attributes.slug, as it has to be a unique value, then we'll close off our div.
[3:58] Inside that we want to define an H2 and a P tag. Inside those respective tags, in our h2 pass link. We want that to display post.attributes.title, which will be our post title.
[4:25] After that, we have a P tag. We want that to say By Our Author, which we get the value from post.attributes.author, on the date, which we get from using the reformDate function that we initialized. Then we pass post.attributes.date.
[5:07] Inside our link, we have to define a couple of parameters, like the href, so we can actually point to something. We need to have a path name. This is /blog, and then we'll have our post.attributes.slug, so we can navigate to that page, and of course, we pass our href.
[5:47] In our P tag, our first P tag, we want to display a short description. To do that, we'll pass our truncate summary function. In that, we'll pass post.attributes.body plus some text that says more. Then at the bottom of our file, we want to export default BlogList.
[6:29] In our Explorer, we'll open up our styles/Home.module.css and then we'll update grid to card here with some fresh styles. Now you'll have to add those styles to our blog component. We'll open our blog component, and inside our first div, I'll just reformat all of this.
[7:00] On our first div, we're going to add a class name styles.grid. I'll just copy that because it's got a lot. In our H2, we do the same styles.card. In our P, we do the same with styles.description and everything looks great.
[7:29] Next up, we want to display our blog list on our page. In our Explorer, we go to index.js in our pages folder, and I'll close this. We'll import blog list from components, search blog list. Then what we need to do now is below our P, add our BlogList component and pass the props or blogs = posts.post. Close that and save.
[8:20] Now we have a list of items appearing in our Next.js application. That is how you create a component to display items from your Strapi collection type.