Adding Pagination to a Next.js App List

Adding Pagination to a Next.js App List

In my recent project, I needed to implement pagination for lists of items. After exploring various approaches online, I understood how I could do it. The backend is Laravel and the API result has pagination. My goal was to create a component for displaying the “Previous” and the “Next” buttons. Following this approach, I successfully developed a custom pagination component. Here’s the code:

const Pagination = ({ meta, onHandlePage }) => {
  const classConditionNext =
    meta.page == meta.pages
      ? "cursor-default pointer-events-none"
      : "cursor-pointer hover:bg-blue-200";

  const classConditionPervious =
    meta.page == 1
      ? "cursor-default pointer-events-none"
      : "cursor-pointer hover:bg-blue-200";

  const showOffset = meta.limit * (meta.page - 1) + 1;
  const showLimit = meta.limit * meta.page;

  if (meta.pages == 1 || meta.total == 0) return;
  return (
    <div className="w-5/6 flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
        <div>
          <p className="text-sm text-gray-700">
            Showing <span className="font-medium">{showOffset} </span>
            to <span className="font-medium">{showLimit} </span>
            of <span className="font-medium">{meta.total} </span>
            results
          </p>
        </div>
        <div>
          <nav
            className="isolate inline-flex -space-x-px rounded-md shadow-sm"
            aria-label="Pagination"
          >
            <a
              onClick={(e) => onHandlePage(meta.page - 1)}
              aria-current="page"
              className={`rounded-lg relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 
          ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 mr-1 ${classConditionPervious}`}
            >
              Pervious
            </a>
            <a
              onClick={(e) => onHandlePage(meta.page + 1)}
              className={`rounded-lg relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 
          ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 ${classConditionNext}`}
            >
              Next
            </a>
          </nav>
        </div>
      </div>
    </div>
  );
};
export default Pagination;

  Here’s how to call the component:

<Pagination meta={meta} onHandlePage={handlePage} />

  My front-end styling is powered by Tailwind CSS.  

What is Meta:

The Laravel API response includes a meta key containing pagination information.

{
    "data": [
        {
            "id": 1,
            "name": "Test",
            "created_at": "2024-03-24T08:41:18.000000Z",
            "updated_at": "2024-03-24T08:41:18.000000Z"
        }
    ],
    "status": "OK",
    "code": 200,
    "error_message": "",
    "meta": {
        "total": 1,
        "pages": 1,
        "limit": 10,
        "page": 1,
        "prev": null,
        "next": null
    }
}

What is handlePage:

The handlePage method updates the current page number when either the previous or next button is clicked.

  
  const handlePage = (e: any) => {
    setPage(e);
  };

  Please leave me your opinion in the comments.

One thought on “Adding Pagination to a Next.js App List”

Leave a Reply

Your email address will not be published. Required fields are marked *