Pagination NEXTJS / Next JS 페이지 항목

Paginatino 예시

웹사이트를 만들때 Pagination라 하는 페이지 이동 항목은 필수적이다.

 

NextJS를 사용하는 경우 Pagination이라는 컴터넌트를 별도로 만들어 두면 필요한 곳마다 동일한 형식의 Pagination을 

구현하는데 있어 편리하여, 필수적으로 컴퍼넌트로 별도 구성을 해야한다. 

 

위 스크린샷에 보면 Layout > div > Pagination 이 별도로 들어가 있음을 확인할 수 있는데,

Pagination은 currentPage, handlePageChange, totalPage, pageSize를 prop으로 받고 있다.

 

아래는 export default 되고 있는 Pagination 코드이다.

- startIndex: 0과 현재페이지 -3 한 값중 max값을 구하여 첫번째 index를 나타냄

- visiblePages: slice()함수를 이용하여, 위에 구한 첫번째index와, 첫 index+5 값을 (Slice함수에 의해 총 5페이지)나타낸다.

- isFirstPage : 현재페이지가 첫페이지인 1인 경우 prev 버튼을 비활성하기 위함.

- isLastPage: 마지막 페이지는 totalPage에 도달한경우 next 버튼을 비활성하기 위함.

아래 handlePageChange는 해당 Pagination을 받을 index에서 아래와 같이 prop을 넘겨받아 currentPage를 계속 바꿔준다.

interface pageProps {
  currentPage: number;
  totalPage?: number;
  pageSize: number;
  handlePageChange: (page: number) => void;
}

const Pagination = ({
  currentPage,
  handlePageChange,
  totalPage,
  pageSize,
}: pageProps) => {
  const pages = totalPage
    ? Array.from({ length: totalPage }, (_, i) => i + 1)
    : [];
  const startIndex = Math.max(0, currentPage - 3);
  const visiblePages = pages.slice(startIndex, startIndex + 5);
  const isFirstPage = currentPage === 1;
  const isLastPage = currentPage === totalPage;

  return (
    <div className="bg-gray-200 flex w-[55%] justify-center rounded-md">
      {isFirstPage ? (
        <span className="text-gray-400 flex items-center">prev</span>
      ) : (
        <Link legacyBehavior href={`/streams?page=${currentPage - 1}`}>
          <a
            onClick={() => handlePageChange(currentPage - 1)}
            className="flex items-center "
          >
            prev
          </a>
        </Link>
      )}
      {visiblePages.map((page) => (
        <div
          key={page}
          className="rounded-md flex items-center  hover:bg-sky-200 "
        >
          <Link
            onClick={() => handlePageChange(page)}
            href={`/streams?page=${page}`}
            className={cls(
              "font-semibold mx-1 px-3 py-2 border-blue-500",
              currentPage === page ? "text-red-500" : "cursor-pointer"
            )}
          >
            {page}
          </Link>
        </div>
      ))}
      {isLastPage ? (
        <span className="text-gray-400 flex items-center"> next</span>
      ) : (
        <Link legacyBehavior href={`/streams?page=${currentPage + 1}`}>
          <a
            onClick={() => handlePageChange(currentPage + 1)}
            className="flex items-center "
          >
            next
          </a>
        </Link>
      )}
    </div>
  );
};