2022-12-20
1515
#nextjs
Taofiq Aiyelabegan
145691
111
Dec 20, 2022 ⋅ 5 min read

How to add pagination to your Next.js app

Taofiq Aiyelabegan Taofiq is a technical writer and software engineer working on building mobile and web applications. Additionally, he likes to contribute to open source projects and exploring new topics.

Recent posts:

Interface Segregation Principle

SOLID series: Understanding the Interface Segregation Principle (ISP)

Discover how the Interface Segregation Principle (ISP) keeps your code lean, modular, and maintainable using real-world analogies and practical examples.

Oyinkansola Awosan
Jun 30, 2025 ⋅ 7 min read
​​How HTML’s Selectedcontent Element Improves Dropdowns

​​How HTML’s <selectedcontent> element improves dropdowns

is an experimental HTML element that gives developers control over how a selected option is displayed, using just HTML and CSS.

Temitope Oyedele
Jun 27, 2025 ⋅ 6 min read
advanced caching in Node.js with Valkey

How to get faster data access in Node.js with Valkey

Learn how to implement an advanced caching layer in a Node.js app using Valkey, a high-performance, Redis-compatible in-memory datastore.

Muhammed Ali
Jun 27, 2025 ⋅ 7 min read
how to properly handle rejected promises in TypeScript

How to properly handle rejected promises in TypeScript

Learn how to properly handle rejected promises in TypeScript using Angular, with tips for retry logic, typed results, and avoiding unhandled exceptions.

Lewis Cianci
Jun 26, 2025 ⋅ 4 min read
View all posts

7 Replies to "How to add pagination to your Next.js app"

  1. I am sorry but I fail to see the point of pagination implemented this way.
    The code still fetches all 100 items from the backend. The idea of pagination is not only to split the long array of items for better viewing (arguably, a long scroll is better than a bunch of pages) but to prevent fetching too much from the API server or database.
    This example fails to deliver.

    1. Agreed, this will keep the same 100 items fetched at build time and nothing else. I am searching for a way to apply server side pagination.

      1. This blog post should be removed, this is not how pagination should work. As @Suslik says, there is no point to pagination this way if we just fetch all of the items.This does not solve the application of server side pagination.

  2. Regardless of what Suslik, Alberto, Jade, or anyone who previously left a reply might have said,
    I have successfully implemented the logic and the final export ‘paginate’ as you instructed.
    When I searched the internet for pagination-related examples, I could only find frustrating ones that work with React but not with Next.js due to hydration issues.
    I attempted to implement libraries like Redux, Redux Toolkit, React Query, and others, but they didn’t apply straightforwardly.
    @Taofiq Aiyelabegan, I don’t know where on Earth you posted this, but you’ve greatly assisted a working professional living in a land of Park Ji-sung, Kim Yuna, Son Heung-min, BTS, New Jin’s, and the K-pop phenomenon.
    From a distant place, I wish you all the best. God bless you.

Leave a Reply