如何Implement Pagination：Claude Code 实战指南

分页实现を通过 Claude Code 提高效率

分页は一見シンプルですが、UI组件、API设计、查询优化と幅広い知識が求められます。使用 Claude Code，要件を伝える只需前端から后端まで一貫した实现を生成可以。

オフセットベースの分页

もっとも基本的パターンです。让 Claude Code次如同依頼します。

> 分页付きの文章列表组件をReactで作って。
> 1页面10件、页面番号显示、前後移動按钮あり。

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);

  // 显示する页面番号を絞る（現在页面の前後2页面）
  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) => {
        // 省略記号の显示
        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>
  );
}

カーソルベースの分页

大量数据的情况下はカーソルベースが高效的。APIと前端の両方を一度に生成可以。

// 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, // 次页面の存在确认用に1件多く获取
    ...(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 });
}

無限滚动の实现

Intersection Observer API使用…的無限滚动も、使用 Claude Code簡潔に实现可以。

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>
  );
}

基本的使い方はClaude Codeの入門指南を、プロンプトの工夫はプロンプトを改善する5つのTips。

总结

借助 Claude Code，オフセット类型、カーソル类型、無限滚动など、要件に合った分页を短时间で实现可以。APIからUIまで一貫した设计が得られるのが大きなメリットです。

详情请参阅Claude Code官方文档。