Pagination in Next JS With Filters

🆘 Support
1

Do you have any advice or examples on how to handle filter-able paginated pages in a static Next js site? E.g. a list of all Blog posts in a site that can be filtered by multiple filter options.

For more context, I’m using Next js with the Pages router, but any examples would be great. I’ll also be using this in contexts where there may be up to 100s of articles, so ideally it would be somewhat performant with that number of items.

I’m struggling to come up with an effective way to sync up URL parameters, along with client side filters and paginated data.

My best bet might be to fetch the data on the client based on the applied filters and paginate accordingly, but I’m worried that this might list posts that haven’t been built yet and would also increase my number of API calls. I’ve considered other options like retrieving all of the data on build time and filtering it on the client, but this doesn’t seem like it would scale very well.

Please let me know if you have any solutions to this.

2

Hello @john2 and welcome to the community

If you are using the GraphQL endpoint you should be able to use these parameters: Pagination — Content Delivery API — DatoCMS both the all____Meta query for your model, and the all______ query accept filters. This way you can get the information of how many records are falling into the filter you specified, and paginate using the “first” and “skip” parameters.

3

Thank you @m.finamor

Yes, I’m using the GraphQL endpoint, sorry, I should have said!

I’ll try to use the meta count during the pagination in the client side approach in that case, to hopefully only list records that were included during the build.

1 Like