How to create pagination in NextJs for large number of pages?
Tags: nextjs
Published: 2022-04-18 04:13:03

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:

![Full code Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8d6yg8l52u2q4ybjlv7.png)

The final product would look like following:
![When current page is first page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8possl6na2zdpnio1psp.png)
`When current page is first page`

![When current page is 25](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75wsw2v8y11utcexsg2w.png)
`When current page is 25`
![When current page is 35](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vhi2ivmnb9er82nhw5j.png)
`When current page is 35`
![When current page is last page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt49rsvce8qsi2cz2t29.png)
`When current page is last page`