Next.js & Code Pagination: A Beginner’s Guide to Data Display

Written by

learnmodernwebdevelopment

in

In the world of web development, displaying large datasets can be a significant challenge. Imagine a scenario where you have thousands of blog posts, product listings, or user profiles. Loading all of this data at once not only slows down your website but also degrades the user experience. This is where pagination comes to the rescue. Pagination is the process of dividing a large dataset into smaller, more manageable chunks, or pages. This allows users to navigate through the data efficiently, improving both performance and usability. In this comprehensive guide, we’ll delve into how to implement pagination in your Next.js applications, empowering you to handle large datasets seamlessly.

Understanding the Importance of Pagination

Before we dive into the technical aspects, let’s understand why pagination is so crucial. Consider the following benefits:

  • Improved Performance: Loading only a subset of data reduces the initial load time of your page, leading to a faster and more responsive user experience.
  • Enhanced User Experience: Users can easily navigate through large datasets without being overwhelmed. Clear page numbers and navigation controls make it intuitive to find the information they need.
  • Reduced Server Load: By fetching data in smaller batches, you reduce the load on your server, improving overall application stability and scalability.
  • SEO Benefits: Well-implemented pagination can help search engines crawl and index your content more effectively.

Without pagination, your website could suffer from slow loading times, poor user experience, and potential SEO issues. Pagination is a fundamental technique for building efficient and user-friendly web applications.

Setting Up Your Next.js Project

If you don’t already have a Next.js project, let’s quickly create one. Open your terminal and run the following command:

npx create-next-app pagination-tutorial

Navigate into your project directory:

cd pagination-tutorial

Now, let’s install some necessary dependencies. For this tutorial, we will use a simple in-memory data source. However, in a real-world scenario, you would typically fetch data from an API or database. We’ll also install a library to help with generating dummy data for demonstration purposes.

npm install faker

Creating a Dummy Data Source

To simulate a large dataset, we’ll create a simple data source using the `faker` library to generate some fake data. Create a new file named `data.js` in your project’s root directory and add the following code:

// data.js
import { faker } from '@faker-js/faker';

export const generatePosts = (count) => {
  const posts = [];
  for (let i = 0; i < count; i++) {
    posts.push({
      id: i + 1,
      title: faker.lorem.words(5),
      content: faker.lorem.paragraphs(2),
      author: faker.person.fullName(),
      date: faker.date.past().toLocaleDateString(),
    });
  }
  return posts;
};

This code defines a function `generatePosts` that takes a `count` parameter and generates an array of post objects. Each post object includes an ID, title, content, author, and date. We’ll use this function to create our dataset.

Implementing Pagination in a Next.js Page

Now, let’s create a page component to display the paginated data. Create a new file named `pages/posts.js` and add the following code:

// pages/posts.js
import { useState, useEffect } from 'react';
import { generatePosts } from '../data';

const POSTS_PER_PAGE = 10;

const Posts = () => {
  const [posts, setPosts] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPosts, setTotalPosts] = useState(0);

  useEffect(() => {
    const fetchData = async () => {
      // Simulate fetching data from an API or database
      const allPosts = generatePosts(100); // Generate 100 posts
      setTotalPosts(allPosts.length);
      const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
      const endIndex = startIndex + POSTS_PER_PAGE;
      const paginatedPosts = allPosts.slice(startIndex, endIndex);
      setPosts(paginatedPosts);
    };

    fetchData();
  }, [currentPage]);

  const totalPages = Math.ceil(totalPosts / POSTS_PER_PAGE);

  const handlePageChange = (newPage) => {
    if (newPage >= 1 && newPage <= totalPages) {
      setCurrentPage(newPage);
    }
  };

  return (
    <div>
      <h2>Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
            <p>By {post.author} on {post.date}</p>
          </li>
        ))}
      </ul>
      <div>
        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
          Previous
        </button>
        <span>Page {currentPage} of {totalPages}</span>
        <button onClick={() => handlePageChange(currentPage + 1)} disabled={currentPage === totalPages}>
          Next
        </button>
      </div>
    </div>
  );
};

export default Posts;

Let’s break down this code:

  • Import Statements: We import `useState` and `useEffect` from React and `generatePosts` from our `data.js` file.
  • Constants: `POSTS_PER_PAGE` is set to 10, determining the number of posts displayed per page.
  • State Variables:
    • `posts`: Stores the paginated posts to be displayed.
    • `currentPage`: Tracks the current page number.
    • `totalPosts`: Tracks the total number of posts.
  • `useEffect` Hook:
    • This hook runs after the component renders.
    • It simulates fetching data from an API using `generatePosts(100)` to create 100 posts. In a real application, you would replace this with a call to your backend API.
    • It calculates the `startIndex` and `endIndex` based on the `currentPage` and `POSTS_PER_PAGE`.
    • It uses the `slice()` method to extract the relevant posts for the current page.
    • It updates the `posts` state with the paginated data.
  • `totalPages` Calculation: Calculates the total number of pages based on `totalPosts` and `POSTS_PER_PAGE`.
  • `handlePageChange` Function: Updates the `currentPage` state when the user clicks the

More posts