Simple Pagination in Next.js using react-paginate

#nextjs #react #javascript #webdev

The development of the Pagination in Next.js project can be tricky. A common way of building pagination like in CRA won’t be the best option in Next.js. It won’t be SEO Friendly.

I will show you how to build a List of Posts with SEO Friendly Pagination in a Next.js project. For pagination UI I am going to use package react-paginate. Data for testing I am going to fetch from API of this service

The resulting project looks like this:

Pagination Demo in Next.js Project

Prerequisites to Backend API

To develop pagination in Next.js you need to have your Backend API prepared. Your Backend API response should provide a total count of the items, current page, and items of the page. Ideally, also you need to have a total page count.

Example of the response from the Backend API with pagination.

	{
	meta: {
	success: true,
	totalCount: 4155,
	pageCount: 208,
	currentPage: 1,
	perPage: 20,
	}
	result: [
	{...},
	{...},
	...
	]
	}

view raw responseExample.js hosted with ❤ by GitHub

Also, your backend needs to support fetching items of a certain page. For example https://api.yourapp.com/posts?page=3

Project Setup

In the below example I use a next.js project created using create-next-app. I installed package axios for fetching API and package react-paginate for pagination UI.

You can install these package with this command

npm i axios react-paginate

All code of the project contains in pages/index.js

	import React, { useState, useEffect } from 'react';
	import axios from 'axios';
	import ReactPaginate from 'react-paginate';
	import Router, { withRouter } from 'next/router'

	import '../assets/styles.scss';


	const Home = (props) => {
	const [isLoading, setLoading] = useState(false); //State for the loading indicator
	const startLoading = () => setLoading(true);
	const stopLoading = () => setLoading(false);

	/*
	Posts fetching happens after page navigation,
	so we need to switch Loading state on Router events.
	*/
	useEffect(() => { //After the component is mounted set router event handlers
	Router.events.on('routeChangeStart', startLoading);
	Router.events.on('routeChangeComplete', stopLoading);

	return () => {
	Router.events.off('routeChangeStart', startLoading);
	Router.events.off('routeChangeComplete', stopLoading);
	}
	}, [])

	//When new page selected in paggination, we take current path and query parrams.
	// Then add or modify page parram and then navigate to the new route.
	const pagginationHandler = (page) => {
	const currentPath = props.router.pathname;
	const currentQuery = props.router.query;
	currentQuery.page = page.selected + 1;

	props.router.push({
	pathname: currentPath,
	query: currentQuery,
	});

	};

	//Conditional rendering of the posts list or loading indicator
	let content = null;
	if (isLoading)
	content = <div>Loading...</div>;
	else {
	//Generating posts list
	content = (
	<ul>
	{props.posts.map(post => {
	return <li key={post.id}>{post.title}</li>;
	})}
	</ul>
	);
	}

	return (
	<div className="container">
	<h1>Posts List with Pagination in Next.js</h1>
	<div className="posts">
	{content}
	</div>

	<ReactPaginate
	previousLabel={'previous'}
	nextLabel={'next'}
	breakLabel={'...'}
	breakClassName={'break-me'}
	activeClassName={'active'}
	containerClassName={'pagination'}
	subContainerClassName={'pages pagination'}

	initialPage={props.currentPage - 1}
	pageCount={props.pageCount}
	marginPagesDisplayed={2}
	pageRangeDisplayed={5}
	onPageChange={pagginationHandler}
	/>
	</div>
	);
	};

	//Fetching posts in get Intial Props to make the app seo friendly
	Home.getInitialProps = async ({ query }) => {
	const page = query.page \|\| 1; //if page empty we request the first page
	const posts = await axios.get(`https://gorest.co.in/public-api/posts?_format=json&access-token=cxzNs8fYiyxlk708IHfveKM1z1xxYZw99fYE&page=${page}`);
	return {
	totalCount: posts.data._meta.totalCount,
	pageCount: posts.data._meta.pageCount,
	currentPage: posts.data._meta.currentPage,
	perPage: posts.data._meta.perPage,
	posts: posts.data.result,
	};
	}


	export default withRouter(Home);

view raw index.js hosted with ❤ by GitHub

Let’s go through each piece of the code.

Fetching Posts

We start with fetching posts via our API. We fetch them in a getIntialProps hook that fires on the server-side on the first run and further navigations. It populates page during prerendering. Fetching data in this hook will make our pages SEO friendly.

	Home.getInitialProps = async ({ query }) => {
	const page = query.page \|\| 1; //if page empty we request the first page
	const posts = await axios.get(`https://gorest.co.in/public-api/posts?_format=json&access-token=cxzNs8fYiyxlk708IHfveKM1z1xxYZw99fYE&page=${page}`);
	return {
	totalCount: posts.data._meta.totalCount,
	pageCount: posts.data._meta.pageCount,
	currentPage: posts.data._meta.currentPage,
	perPage: posts.data._meta.perPage,
	posts: posts.data.result,
	};
	}

view raw index.js hosted with ❤ by GitHub

Rendering Posts and Pagination

Depending on the loading state we render either the text Loading… or list of posts.

Below I use component ReactPaginate from the package react-paginate. We can configure what class names to set for pagination elements via props. Styles for the project are defined globally in styles.scss.

Pages count and initial page index is also set via props. onPageChange receives a pagination handler function which fires every time the user selects a new page.

	let content = null;
	if (isLoading)
	content = <div>Loading...</div>;
	else {
	//Generating posts list
	content = (
	<ul>
	{props.posts.map(post => {
	return <li key={post.id}>{post.title}</li>;
	})}
	</ul>
	);
	}

	return (
	<div className="container">
	<h1>Posts List with Pagination in Next.js</h1>
	<div className="posts">
	{content}
	</div>

	<ReactPaginate
	previousLabel={'previous'}
	nextLabel={'next'}
	breakLabel={'...'}
	breakClassName={'break-me'}
	activeClassName={'active'}
	containerClassName={'pagination'}
	subContainerClassName={'pages pagination'}

	initialPage={props.currentPage - 1}
	pageCount={props.pageCount}
	marginPagesDisplayed={2}
	pageRangeDisplayed={5}
	onPageChange={pagginationHandler}
	/>
	</div>
	);

view raw index.js hosted with ❤ by GitHub

Page Select Handler

When a user selects a page, the pagginationHandlerfunction fires with the selected page index as the argument.

We fetch data inside of the getIntialProps. And getIntialPropshook fires during page change and reads query param pageto fetch a certain data from Backend API.

So we need to change the route with a new query param pagewhich will contain a page index to trigger posts fetch and component re-render.

	const pagginationHandler = (page) => {
	const currentPath = props.router.pathname;
	const currentQuery = {...props.router.query}; //Copy current query to avoid its removing
	currentQuery.page = page.selected + 1;

	props.router.push({
	pathname: currentPath,
	query: currentQuery,
	});

	};

view raw index.js hosted with ❤ by GitHub

Loading Indicator

To improve user experience I added a loading indicator.

Our posts fetching happens during the page change, we need to rely on router events to switch loading state. I created the state and 2 functions to switch it.

Then after the component is mounted I set handlers on events routeChangeStart and routeChangeComplete.

When the component is unmounted I remove handlers from these events to avoid memory leaks.

That's it. I hope this example helped you to understand how to build pagination in your Next.js project.

	const [isLoading, setLoading] = useState(false); //State for loading indicator
	const startLoading = () => setLoading(true);
	const stopLoading = () => setLoading(false);

	//Since requests happens after chaning routes url ?page={n} we need to bind loading events
	// on the router change event.
	useEffect(() => { //Setting router event handlers after component is located
	Router.events.on('routeChangeStart', startLoading);
	Router.events.on('routeChangeComplete', stopLoading);

	return () => {
	Router.events.off('routeChangeStart', startLoading);
	Router.events.off('routeChangeComplete', stopLoading);
	}
	}, [])