Cara Implement Pagination dengan Claude Code

paginationimplementasi dengan Claude Code: efisiensi

pagination 一見シンプル す 、UIkomponen、API設計、queryoptimasi dan 幅広い知識 求められ.Claude Codeなら、要件 伝えるだけ frontend dari backendま 一貫 implementasi generate bisa dilakukan.

pagination オフセットベース

juga っ dan juga dasar的なpola.Claude Code 次 seperti 依頼.

> pagination付き artikeldaftarkomponen React buatkan.
> 1halaman10件、halaman番号tampilan、前後移動tombolあり。

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
  const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

  // tampilanhalaman番号 絞る（現在halaman 前後2halaman）
  const visiblePages = pages.filter(
    (p) => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2
  );

  return (
    <nav className="flex items-center gap-1">
      <button
        onClick={() => onPageChange(currentPage - 1)}
        disabled={currentPage === 1}
        className="px-3 py-1 rounded disabled:opacity-50"
      >
        Previous
      </button>

      {visiblePages.map((page, i) => {
        // 省略記号 tampilan
        const prev = visiblePages[i - 1];
        const showEllipsis = prev && page - prev > 1;

        return (
          <span key={page}>
            {showEllipsis && <span className="px-2">...</span>}
            <button
              onClick={() => onPageChange(page)}
              className={`px-3 py-1 rounded ${
                page === currentPage ? "bg-blue-600 text-white" : "hover:bg-gray-100"
              }`}
            >
              {page}
            </button>
          </span>
        );
      })}

      <button
        onClick={() => onPageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
        className="px-3 py-1 rounded disabled:opacity-50"
      >
        Next
      </button>
    </nav>
  );
}

pagination カーソルベース

大量データ 場合 カーソルベース efisien.API dan frontend 両方 一度 generate bisa dilakukan.

// APIルート（Next.js App Router）
import { db } from "@/lib/database";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const cursor = searchParams.get("cursor");
  const limit = parseInt(searchParams.get("limit") || "20");

  const items = await db.post.findMany({
    take: limit + 1, // 次halaman 存在konfirmasi用 1件多くpengambilan
    ...(cursor && {
      cursor: { id: cursor },
      skip: 1,
    }),
    orderBy: { createdAt: "desc" },
  });

  const hasMore = items.length > limit;
  const data = hasMore ? items.slice(0, -1) : items;
  const nextCursor = hasMore ? data[data.length - 1].id : null;

  return Response.json({ data, nextCursor, hasMore });
}

Implementasi Infinite Scroll

Intersection Observer API 使った無限scroll juga 、Claude Codeなら簡潔 implementasi bisa dilakukan.

import { useEffect, useRef, useState, useCallback } from "react";

interface Item {
  id: string;
  title: string;
}

export function InfiniteList() {
  const [items, setItems] = useState<Item[]>([]);
  const [cursor, setCursor] = useState<string | null>(null);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);
  const loaderRef = useRef<HTMLDivElement>(null);

  const loadMore = useCallback(async () => {
    if (loading || !hasMore) return;
    setLoading(true);

    const params = new URLSearchParams({ limit: "20" });
    if (cursor) params.set("cursor", cursor);

    const res = await fetch(`/api/items?${params}`);
    const data = await res.json();

    setItems((prev) => [...prev, ...data.data]);
    setCursor(data.nextCursor);
    setHasMore(data.hasMore);
    setLoading(false);
  }, [cursor, hasMore, loading]);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) loadMore();
      },
      { threshold: 0.1 }
    );

    if (loaderRef.current) observer.observe(loaderRef.current);
    return () => observer.disconnect();
  }, [loadMore]);

  return (
    <div>
      {items.map((item) => (
        <div key={item.id} className="p-4 border-b">
          {item.title}
        </div>
      ))}
      <div ref={loaderRef} className="p-4 text-center">
        {loading && "Loading..."}
        {!hasMore && "All items displayed"}
      </div>
    </div>
  );
}

dasar的な使い方 Claude Code 入門panduan 、プロンプト 工夫 プロンプト peningkatan 5つ Tips silakan lihat.

Summary

Dengan Claude Code, オフセット型、カーソル型、無限scroll dll.、要件 合ったpagination waktu singkat implementasi bisa dilakukan.API dari UIま 一貫 設計 得ら 大きなメリット.

Untuk detail lebih lanjut, lihat Dokumentasi Resmi Claude Code.