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.