Pagination

긴 목록을 여러 페이지로 나누어 보여주는 것
사용자 경험을 좋게 만들고 쉽게 정보를 찾도록 해줌
주로 검색 결과, 게시물 목록, 제품 목록 등에 사용하고
서버에서 데이터를 나눠 전송하므로 대용량 데이터를 다룰 때 유용함

설계

새로 고침을 했을 때도 유지되게 하기 위해서 query params를 넘김

query params를 페이지로 넘겨서 페이지에 10개씩 불러오도록 작업
총 페이지가 10 미만인 경우에는 1~10 페이지를 버튼으로 나오게 하고
10 이상인 경우에는 현재 페이지만 숫자로 하고 이전, 다음 버튼으로 구현

데이터 보여주는 페이지

router query로 현재의 페이지 값을 받아 옴
그래서 api/stores?page=${1} 이런 식으로 동적으로 API 넘겨줌

Next.js API Routes (Prisma)

현재 페이지를 변수로 받아서
해당 페이지의 데이터만 가공해서 넘겨준다
prisma의 skip과 take를 활용해서 구현할 것

Pagination 컴포넌트

총 페이지 개수와 현재 페이지를 변수로 받아 옴
해당 페이지의 이동 링크를 만듦 query: {page: 1}

구현

• 데이터를 가져오는 컴포넌트에서
  api route를 불러 올 때 page라는 query를 넣어서 보내줌

/** 데이터를 가져오는 컴포넌트 */
const router = useRouter()
const { page = '1' }: any = router.query

const {
  isLoading,
  isError,
  data: stores,
} = useQuery(`stores-${page}`, async () => {
  const { data } = await axios(`api/stores?page=${page}`)
  return data as StoreApiResponse
})

---

• 위에서 받아온 page라는 변수를 사용해서
  prisma의 pagination 기능을 통해 해당되는 데이터만 가져온다.

/** next.js api routes 
 * api/stores.ts
 */
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<StoreApiResponse>,
) {
  const { page = '1' }: { page?: string } = req.query
  const prisma = new PrismaClient()

  // 전체 데이터 카운팅
  const count = await prisma.store.count()
  const skipPage = parseInt(page) - 1
  const stores = await prisma.store.findMany({
    orderBy: {
      id: 'asc',
    },
    skip: skipPage * 10,
    take: 10,
  })

  res.status(200).json({
    page: parseInt(page),
    data: stores,
    totalCount: count,
    totalPage: Math.ceil(count / 10),
  })
}