DEV Community: VladymyrPylypchatin

Simple Pagination in Next.js using react-paginate

VladymyrPylypchatin — Sun, 29 Mar 2020 13:03:59 +0000

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.

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

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.

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.

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.

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.

Project code

https://github.com/VladymyrPylypchatin/nextjs-pagination

Thanks for reading! :)

I am Vova Pilipchatin, a freelance Software Engineer and Web Developer.
If you are enjoyed this article, please follow me on Twitter.

There I share what I learn about how to launching SaaS projects and building freelance business :)

This post was originally published on my blog.

The simple way to use Scoped and Global SCSS in Next.js

VladymyrPylypchatin — Fri, 13 Dec 2019 19:43:18 +0000

When I started working with next.js I had difficulties with styling components. Although it has a default way of styling called CSS in JS, I preferer Create React App approach. When you can write SASS/SCSS styles in separate files and scope it to the file or make it global.

The main problem was that the default next-sass package allowed only to use ether scoped styles or global. There wasn’t a simple way how to use it them both.
So after some research and development, I figure out how to make it work with both of them. So I want to share with you how to make it, so you can save some of your time.

Warning!

This method doesn't work with the latest next.js updates.I recommend using the approach in this comment https://dev.to/vladymyrpylypchatin/comment/m7fg

High-Level Overview

First of all, we will need to install next-sass and node-sass packages in our project. Then we will need to write the custom configuration for webpack in the next.config.js to make these packages working as we want.
After these steps, you will be able to just use import styles from component.scss to make scoped to component styles. Or import filname.global.scss to use global styles into a component.
Let’s take a look at the details.

Install dependencies

Run these commands to install packages @zeit/next-sass and node-sass.

npm install --save @zeit/next-sass node-sass


yarn add @zeit/next-sass node-sass

Setup next.js configuration

First, you need to create a file next.config.js It is a predefined name so this file should have exactly this name otherwise it won’t work. next.config.js is a file where we can configure our next.js application and tweak default webpack configs.
Paste this code into your next.config.js, save it and restart your development server.

const withSass = require('@zeit/next-sass');
module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 2,
  },
  webpack: config => {
    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes('.scss')) {
        rule.rules = rule.use.map(useRule => {
          if (typeof useRule === 'string') {
            return { loader: useRule };
          }
          if (useRule.loader === 'css-loader') {
            return {
              oneOf: [
                {
                  test: new RegExp('.global.scss$'),
                  loader: useRule.loader,
                  options: {},
                },
                {
                  loader: useRule.loader,
                  options: { modules: true }
                },
              ],
            };
          }
          return useRule;
        });
        delete rule.use;
      }
    });
    return config;
  },
});

How to use

Scoped styles

To use scoped styles just create a file *.scssand import it to a react component. The imported variable will store an object with style’s class names mapped to its hash versions.
Component.scss

.someScssClass {
    height: 100px;
    backgrond: red;
    ...
}

Component.jsx

import React from 'react';
import styles from './Component.scss';
const Component = () => {
    return (
        <div className={styles.someScssClass}>
        ...
    </div>
    );
};

Global styles

To make global styles you need to create a file with this name convention *.global.scss and import it to the React component.

styles.global.scss

.globalClass{
    ...
}

Component.jsx

import React from 'react';
import '../{path}/styles.global.scss';
const Component = () => {
    return (
        <div className="globalClass"}>
       ...
    </div>
    );
};

That’s it. Now you can easily use both global and local SCSS styles in your project. I hope this tutorial saved you some time.
I am a freelance software engineer who loves to develop web and mobile applications, sass. Subscribe to get insights and lessons learned while building my freelance business and SasS projects :)

JavaScript
Nextjs
React
Web App Development