Add Pagination with the Meta Object Returned from Strapi in Next.js 13
We want to add pagination to our blog page so that we can display a limited number of posts per page & allow users to navigate between posts. We'll do this by using Strapi's built-in pagination service to fetch a limited number of posts per page & display them on the page.
Strapi has a meta object that is returned with data that we can use to manipulate the page size & which page we are on. On the home page, we will update our getPosts function to set take a page parameter so that we can fetch the posts for the page that we are on. We'll also play with the pageSize that is set to see different numbers of posts being returned. In our API call we'll add ?pagination[page]=${page}&pagination[pageSize]=3 to set the page & the number of posts per page.
When this is up & running, we'll import a pre-built Pagination component that handles navigating between next & previous pages. Check out the component logic here.
Instructor: [0:00] We want to be able to navigate through pages as we add more data to our application. Currently, we have four posts and if we added more, the layout of our application will change drastically. To improve that user experience, we'll add pagination to our application.
[0:17] We'll make a request using Thunder Client to localhost 1337 API/posts or minimize the ID. At the bottom of our request, we notice we have a metal object with pagination in it. So we're going to utilize Strapi's built-in pagination service to create pagination in our Next.js application.
[0:39] To do this, open up our Index page in our app directory. At the bottom of our file, we have our getPost function that we use to get entries from Strapi. We'll start by editing this to add a pagination filter that says posts pagination. We use page pagination, close our file explorer, is equal to page number that we want to get. Let's say we want to get page two.
[1:11] Pagination, here, we'll define the page size. We'll set our page size to three, get rid of the second posts, here, that we added into the URL, and Save. Now, we get the second page of items. If we change page two to one, we get the first page.
[1:37] If we change this to page size of four and change this to page two, we should get two entries. If we change it to page one, we should get four entries. Ideally, we don't want this hard coded. To deal with this, we use something called search Params.
[1:57] At the top of our file will use this prop that Next.js gives us and say search Params, with a capital P. We define a const page that we restructure from search Params and then define page param as page.
[2:19] Should it be undefined or set the value to one? If not, the value will be page. Then, we go on and pass page param as an argument into our getPost function. The bottom of our file in our getPosts, we pass page param.
[2:40] Instead of hard coding the value of the page number, we can define this as pageParam with a capital P. We get our first page as usual. We'll change our page size to three, and if we go to our URL and say /page is equal to two, we get our second page.
[3:04] If we take that away and go to Index, we still have our Index showing us page one, which is what this snippet of code does for us. We don't want to navigate to pages using our URL and we want the user to be able to use elements on the page. To do that, we use our pagination component, we import it at the top of our file, change that too.
[3:26] Copy that and paste it, save. Right below our list we'll say pagination. Our pagination, if we go into our components using our file explorer, we check our Pagination.js file takes in prop of pagination data. We want to go back to our page and say pagination, pagination data is equal to data.meta.pagination, and then close our file component.
[4:05] Currently, as you saw in our pagination file we have different code commented. We'll un-comment this snippet, which displays next page if we're on our first page. We'll un-comment this snippet which does and deals with all other use cases, and we'll un-comment this snippet which deals with our last page and save.
[4:27] Now if we navigate to our next page, our component here changes to say previous and next page, and we can navigate to our next page. Because this is our last page, we can use this to go previous, previous and next, next, previous, previous. That is how you add pagination to Next.js and Strapi.