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:

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Would You Use If() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 min read
Typescript or Zod for Validation?

TypeScript vs Zod: Clearing up validation confusion

Learn when to use TypeScript, Zod, or both for data validation. Avoid redundant checks and build safer, type-sound applications.

Alexander Godwin
Oct 6, 2025 ⋅ 3 min read
Wasm 3 Before GTA 6 LogRocket Article

We got Wasm 3.0 before GTA 6: Meet the web’s new engine

Discover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.

Ikeh Akinyemi
Oct 3, 2025 ⋅ 2 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