How to create pagination in NextJs for large number of pages?

Ashim Shrestha — Mon, 18 Apr 2022 04:13:03 +0000

Hello everyone.
This is my first post.

This was a specific problem that I faced while trying to clone a manga page. I wanted to create a pagination navigator which looked like

First Prev ... 21 22 23 24 25 26 27 28 29 30 31 ... Next Last

where current page is 26.

The simplest way I have found to achieve this in NextJs is by

var total_pages = 50
var current_page = 25
var page_holder = [];

  for (var i = current_page - 5; i <= parseInt(current_page )+ 5 ; i++) {
      if (i > 0 && i <= total_pages) {
        page_holder.push(i);
      }
  }

Here, we are starting with empty array which is all the page rendered in the page. Then we are getting page number starting 5 page before current to 5 page after current page.

Then we are checking if the number is negative or greater than total page to avoid non-existing page number.

Use parseInt() to make sure that math is done correctly. If current_page is 5, then current_page + 5 might return 55 instead of 10 when parseInt isn't used

Then to render the pagination

I am using tailwind to style the component.

return (
<div className='flex flex-row flex-wrap justify-center'>
            <Link href={`/page=1`}>
                <a className={`w-8 text-center justify-center rounded-xl border-2 border-slate-500
            align-middle m-1 p-1 ${!(page == 1) ? 'visible' : 'hidden'}`}
                >
                    First
                </a>
            </Link>
            <Link href={`/page=${page - 1}`}>
                <a className={`w-8 text-center justify-center  rounded-xl border-2 border-slate-500
            align-middle m-1 p-1 ${!(page == 1) ? 'visible' : 'hidden'}`}
                >
                    Prev
                </a>
            </Link>
            {pagesAll.map((val, i) => {
                return (
                    <Link key={i} href={`/page=${val}`}>
                        <a
                            className={`min-w-[2rem] text-center justify-center ${
                                val == page
                                    ? 'bg-slate-500'
                                    : 'border-2 border-slate-500'
                            } rounded-xl align-middle m-1 p-1`}
                        >
                            {val}
                        </a>
                    </Link>
                );
            })}

            <Link href={`/page=${parseInt(page) + 1}`}>
                <a className={`w-8 text-center justify-center  rounded-xl border-2 border-slate-500
            align-middle m-1 p-1 ${!(page == total_pages) ? 'visible' : 'hidden'}`}
                >
                    Next
                </a>
            </Link>
            <Link href={`/page=${total_pages}`}>
                <a className={`w-8 text-center justify-center border-2 border-slate-500 rounded-xl
            align-middle m-1 p-1 ${!(page == total_pages) ? 'visible' : 'hidden'}`}
                >
                    Last
                </a>
            </Link>
        </div>
)

Here, we are using condition to render First, Prev, Next and Last button.

The final code would look like the following:

The final product would look like following:

When current page is first page

When current page is 25

When current page is 35

When current page is last page

DEV Community: Ashim Shrestha

How to create pagination in NextJs for large number of pages?