Aller au contenu principal

usePagination

Ce hook facilite la gestion de la pagination en générant automatiquement les URLs pour naviguer entre les pages. Il synchronise l'état de pagination avec l'URL, permettant de conserver la position lors de la navigation et de partager des liens vers des pages spécifiques.

Retour du hook​

Le hook retourne un objet contenant :

PropriétéTypeDescription
getPageFunctionRetourne un objet avec l'URL pour une page spécifique
getPreviousPageFunctionRetourne un objet avec l'URL de la page précédente
getNextPageFunctionRetourne un objet avec l'URL de la page suivante
canPrevbooleanIndique si une page précédente existe
canNextbooleanIndique si une page suivante existe

Types​

interface PaginationConfig {
  current: number;      // Numéro de la page actuelle
  total: number;        // Nombre total de pages
  urlParam?: string;    // Nom du paramètre d'URL (défaut: "page")
  startAt?: number;     // Numéro de la première page (défaut: 1)
}

Paramètres​

usePagination(config: PaginationConfig)
ParamètreTypeObligatoireDescription
currentnumber✅La page actuelle
totalnumber✅Le nombre total de pages
urlParamstring❌Nom du paramètre d'URL (défaut: "page")
startAtnumber❌Première page (défaut: 1)

Utilisation basique​

import { usePagination } from '@/hooks/use-pagination';
import Link from 'next/link';

export function UserList({ currentPage = 1, totalPages = 5 }) {
  const { getPage, getPreviousPage, getNextPage, canPrev, canNext } = usePagination({
    current: currentPage,
    total: totalPages,
  });

  return (
    <div>
      <ul>
        {/* Liste des utilisateurs */}
      </ul>

      <div style={{ marginTop: '20px' }}>
        <Link href={getPreviousPage().href} className={!canPrev ? 'disabled' : ''}>
          Précédent
        </Link>

        <span style={{ margin: '0 10px' }}>
          Page {currentPage} sur {totalPages}
        </span>

        <Link href={getNextPage().href} className={!canNext ? 'disabled' : ''}>
          Suivant
        </Link>
      </div>
    </div>
  );
}

Fonctionnement​

  1. Lecture des paramètres : Récupère le numéro de page depuis l'URL
  2. Calcul des limites : Détermine si les pages précédente/suivante existent
  3. Génération d'URLs : Crée les URLs pour chaque action de pagination
  4. Persistance : Les paramètres d'URL permettent de partager des liens paginés

Paramètres d'URL​

Par défaut, le hook utilise le paramètre page :

?page=1   # Page 1 (paramètre supprimé par défaut)
?page=2   # Page 2
?page=3   # Page 3

Avec un paramètre personnalisé :

const pagination = usePagination({
  current: 2,
  total: 10,
  urlParam: 'p',  // Utilise ?p=2 au lieu de ?page=2
});

Cas d'usage courants​

1. Paginateur simple avec boutons​

const { getPreviousPage, getNextPage, canPrev, canNext } = usePagination({
  current: 1,
  total: 10,
});

<>
  <Link href={getPreviousPage().href} onClick={(e) => !canPrev && e.preventDefault()}>
    ← Précédent
  </Link>
  <Link href={getNextPage().href} onClick={(e) => !canNext && e.preventDefault()}>
    Suivant →
  </Link>
</>

2. Numéros de page​

const { getPage } = usePagination({ current: 2, total: 5 });

<div>
  {Array.from({ length: 5 }, (_, i) => i + 1).map((page) => (
    <Link key={page} href={getPage(page).href}>
      {page}
    </Link>
  ))}
</div>

3. Pagination commençant à 0​

const { canPrev } = usePagination({
  current: 0,
  total: 10,
  startAt: 0,  // La première page est 0, pas 1
});

Points importants​

  • ⚠️ La page 1 ne crée pas de paramètre d'URL (supprimé pour une URL propre)
  • ⚠️ Les liens sont générés mais ne sont pas cliquables si la navigation est impossible
  • ℹ️ Compatible avec Next.js 13+ (App Router)
  • ℹ️ Utilise usePathname et useSearchParams de Next.js
  • ✅ Permet de partager des liens vers des pages spécifiques
  • ✅ Préserve les autres paramètres d'URL lors de la pagination

Conserver les autres paramètres d'URL​

// Si l'URL est ?search=test&sort=date&page=2
// Le hook préserve automatiquement search et sort lors de la pagination

const { getNextPage } = usePagination({
  current: 2,
  total: 10,
});

// getNextPage().href retournera: ?search=test&sort=date&page=3

Sources​