Paginacja w Next.js: Offset vs Cursor i Infinite Scroll

// app/blog/page.tsx
import Link from 'next/link'
import { notFound, permanentRedirect } from 'next/navigation'
 
const POSTS_PER_PAGE = 10
 
type SearchParamValue = string | string[] | undefined
 
function parsePage(rawPage: SearchParamValue) {
  if (!rawPage) return 1
  if (Array.isArray(rawPage)) return null
  if (!/^[1-9]\d*$/.test(rawPage)) return null
 
  const page = Number(rawPage)
  return Number.isSafeInteger(page) ? page : null
}
 
export default async function BlogPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: SearchParamValue }>
}) {
  const params = await searchParams
  const currentPage = parsePage(params.page)
 
  if (currentPage === null) {
    notFound()
  }
 
  if (currentPage === 1 && params.page) {
    permanentRedirect('/blog') // 308 — trwały duplikat, nie tymczasowy stan
  }
 
  const { posts, totalPosts } = await getPaginatedPosts({
    page: currentPage,
    perPage: POSTS_PER_PAGE,
  })
 
  const totalPages = Math.ceil(totalPosts / POSTS_PER_PAGE)
 
  // Math.max: przy pustej liście (totalPages = 0) strona 1 może być pustym
  // stanem, ale ?page=2 wciąż powinno zwrócić 404, nie 200.
  if (currentPage > Math.max(totalPages, 1)) {
    notFound()
  }
 
  return (
    <main>
      <h1>Blog</h1>
 
      <div className="space-y-6">
        {posts.map((post) => (
          <article key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </article>
        ))}
      </div>
 
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        basePath="/blog"
      />
    </main>
  )
}

// components/pagination.tsx
import Link from 'next/link'
 
interface PaginationProps {
  currentPage: number
  totalPages: number
  basePath: string
}
 
export function Pagination({
  currentPage,
  totalPages,
  basePath,
}: PaginationProps) {
  if (totalPages <= 1) return null
 
  function getPageUrl(page: number) {
    if (page === 1) return basePath // Pierwsza strona bez ?page=
    return `${basePath}?page=${page}`
  }
 
  // Generuj widoczne numery stron (max 7)
  function getPageNumbers(): (number | '...')[] {
    if (totalPages <= 7) {
      return Array.from({ length: totalPages }, (_, i) => i + 1)
    }
 
    if (currentPage <= 3) return [1, 2, 3, 4, '...', totalPages]
    if (currentPage >= totalPages - 2)
      return [
        1,
        '...',
        totalPages - 3,
        totalPages - 2,
        totalPages - 1,
        totalPages,
      ]
    return [
      1,
      '...',
      currentPage - 1,
      currentPage,
      currentPage + 1,
      '...',
      totalPages,
    ]
  }
 
  return (
    <nav
      aria-label="Paginacja"
      className="mt-12 flex items-center justify-center gap-1"
    >
      {currentPage > 1 && (
        <Link
          href={getPageUrl(currentPage - 1)}
          className="rounded-lg px-3 py-2 hover:bg-gray-100"
          aria-label="Poprzednia strona"
        >
          ←
        </Link>
      )}
 
      {getPageNumbers().map((page, i) =>
        page === '...' ? (
          <span key={`dots-${i}`} className="px-3 py-2">
            ...
          </span>
        ) : (
          <Link
            key={page}
            href={getPageUrl(page)}
            className={`rounded-lg px-3 py-2 ${
              page === currentPage
                ? 'bg-blue-600 text-white'
                : 'hover:bg-gray-100'
            }`}
            aria-current={page === currentPage ? 'page' : undefined}
          >
            {page}
          </Link>
        ),
      )}
 
      {currentPage < totalPages && (
        <Link
          href={getPageUrl(currentPage + 1)}
          className="rounded-lg px-3 py-2 hover:bg-gray-100"
          aria-label="Następna strona"
        >
          →
        </Link>
      )}
    </nav>
  )
}

// app/blog/page.tsx
import type { Metadata } from 'next'
 
export async function generateMetadata({
  searchParams,
}: {
  searchParams: Promise<{ page?: SearchParamValue }>
}): Promise<Metadata> {
  const params = await searchParams
  const page = parsePage(params.page) ?? 1
  const baseUrl = 'https://example.com/blog'
 
  return {
    title: page === 1 ? 'Blog | StriveLab' : `Blog, strona ${page} | StriveLab`,
    alternates: {
      canonical: page === 1 ? baseUrl : `${baseUrl}?page=${page}`,
    },
  }
}

return {
  title: `Blog, strona ${page} | StriveLab`,
  alternates: { canonical: `${baseUrl}?page=${page}` },
  pagination: {
    previous: page === 2 ? baseUrl : `${baseUrl}?page=${page - 1}`,
    next: page < totalPages ? `${baseUrl}?page=${page + 1}` : undefined,
  },
}

// Proste, ale wolne przy dużych datasetach
async function getPaginatedPosts({
  page,
  perPage,
}: {
  page: number
  perPage: number
}) {
  const offset = (page - 1) * perPage
 
  const [posts, totalPosts] = await Promise.all([
    db.post.findMany({
      where: { published: true },
      orderBy: [{ createdAt: 'desc' }, { id: 'desc' }],
      skip: offset,
      take: perPage,
    }),
    db.post.count({ where: { published: true } }),
  ])
 
  return { posts, totalPosts }
}

// Szybkie nawet przy milionach rekordów
type Cursor = {
  createdAt: string
  id: string
}
 
function encodeCursor(cursor: Cursor) {
  return Buffer.from(JSON.stringify(cursor)).toString('base64url')
}
 
function decodeCursor(cursor: string): Cursor {
  return JSON.parse(Buffer.from(cursor, 'base64url').toString('utf8'))
}
 
async function getPaginatedPosts({
  cursor,
  perPage,
}: {
  cursor?: string
  perPage: number
}) {
  const decodedCursor = cursor ? decodeCursor(cursor) : null
 
  const posts = await db.post.findMany({
    where: {
      published: true,
      ...(decodedCursor && {
        OR: [
          { createdAt: { lt: new Date(decodedCursor.createdAt) } },
          {
            createdAt: new Date(decodedCursor.createdAt),
            id: { lt: decodedCursor.id },
          },
        ],
      }),
    },
    orderBy: [{ createdAt: 'desc' }, { id: 'desc' }],
    take: perPage + 1,
  })
 
  const hasMore = posts.length > perPage
  const items = hasMore ? posts.slice(0, -1) : posts
  const lastItem = items.at(-1)
  const nextCursor =
    hasMore && lastItem
      ? encodeCursor({
          createdAt: lastItem.createdAt.toISOString(),
          id: lastItem.id,
        })
      : null
 
  return { posts: items, nextCursor, hasMore }
}

// app/api/posts/route.ts
import { NextRequest, NextResponse } from 'next/server'
 
const PAGE_SIZE = 20
 
export async function GET(request: NextRequest) {
  const cursor = request.nextUrl.searchParams.get('cursor') ?? undefined
 
  // Zły input to 400, awaria po naszej stronie to 500 — nie sklejaj ich
  // w jeden status, bo klient nie odróżni "popraw żądanie" od "spróbuj później".
  if (cursor) {
    try {
      decodeCursor(cursor)
    } catch {
      return NextResponse.json(
        { error: 'Nieprawidłowy cursor' },
        { status: 400 },
      )
    }
  }
 
  try {
    const { posts, nextCursor, hasMore } = await getPaginatedPosts({
      cursor,
      perPage: PAGE_SIZE,
    })
 
    return NextResponse.json({
      items: posts.map((post) => ({
        id: post.id,
        title: post.title,
        excerpt: post.excerpt,
      })),
      nextCursor,
      hasMore,
    })
  } catch {
    return NextResponse.json(
      { error: 'Nie udało się pobrać kolejnej strony' },
      { status: 500 },
    )
  }
}

// components/infinite-list.tsx
'use client'
 
import { useEffect, useRef, useState, useCallback } from 'react'
 
interface InfiniteListProps<T> {
  initialItems: T[]
  initialCursor: string | null
  fetchMore: (
    cursor: string,
  ) => Promise<{ items: T[]; nextCursor: string | null; hasMore: boolean }>
  renderItem: (item: T) => React.ReactNode
}
 
export function InfiniteList<T extends { id: string }>({
  initialItems,
  initialCursor,
  fetchMore,
  renderItem,
}: InfiniteListProps<T>) {
  const [items, setItems] = useState(initialItems)
  const [cursor, setCursor] = useState(initialCursor)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [hasMore, setHasMore] = useState(Boolean(initialCursor))
  const observerRef = useRef<HTMLDivElement>(null)
 
  const loadMore = useCallback(async () => {
    if (!cursor || isLoading || !hasMore) return
 
    setIsLoading(true)
    setError(null)
 
    try {
      const { items: newItems, nextCursor, hasMore } = await fetchMore(cursor)
 
      setItems((prev) => {
        const existingIds = new Set(prev.map((item) => item.id))
        const uniqueItems = newItems.filter((item) => !existingIds.has(item.id))
        return [...prev, ...uniqueItems]
      })
      setCursor(nextCursor)
      setHasMore(hasMore)
    } catch {
      setError('Nie udało się załadować kolejnej strony.')
    } finally {
      setIsLoading(false)
    }
  }, [cursor, isLoading, hasMore, fetchMore])
 
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasMore) {
          loadMore()
        }
      },
      { rootMargin: '200px' }, // Ładuj 200px przed końcem listy
    )
 
    if (observerRef.current) observer.observe(observerRef.current)
 
    return () => observer.disconnect()
  }, [loadMore, hasMore])
 
  return (
    <div>
      {items.map((item) => (
        <div key={item.id}>{renderItem(item)}</div>
      ))}
 
      <div
        ref={observerRef}
        aria-live="polite"
        className="flex h-10 items-center justify-center"
      >
        {isLoading && <span className="text-gray-400">Ładowanie...</span>}
        {error && (
          <button type="button" onClick={loadMore}>
            Spróbuj ponownie
          </button>
        )}
        {!hasMore && !isLoading && (
          <span className="text-gray-400">To już wszystko</span>
        )}
      </div>
    </div>
  )
}

'use client'
 
import { useState, useTransition } from 'react'
 
export function LoadMoreList<T extends { id: string }>({
  initialItems,
  initialCursor,
  fetchMore,
  renderItem,
}: InfiniteListProps<T>) {
  const [items, setItems] = useState(initialItems)
  const [cursor, setCursor] = useState(initialCursor)
  const [hasMore, setHasMore] = useState(Boolean(initialCursor))
  const [error, setError] = useState<string | null>(null)
  const [isPending, startTransition] = useTransition()
 
  function handleLoadMore() {
    if (!cursor || isPending) return
 
    startTransition(async () => {
      try {
        const result = await fetchMore(cursor)
        setItems((prev) => [...prev, ...result.items])
        setCursor(result.nextCursor)
        setHasMore(result.hasMore)
        setError(null)
      } catch {
        setError('Nie udało się załadować kolejnej strony.')
      }
    })
  }
 
  return (
    <section>
      {items.map((item) => (
        <div key={item.id}>{renderItem(item)}</div>
      ))}
 
      {error && <p role="alert">{error}</p>}
 
      {hasMore && (
        <button type="button" onClick={handleLoadMore} disabled={isPending}>
          {isPending
            ? 'Ładowanie...'
            : error
              ? 'Spróbuj ponownie'
              : 'Załaduj więcej'}
        </button>
      )}
    </section>
  )
}