Setup (Next.js App Router)
1. Installez nuqs : 2. Ajoutez NuqsAdapter dans votre layout racine : // app/layout.tsx export default function Layout( children : children: React.ReactNode )
Guide
Tri, filtres, pagination et état des colonnes dans l'URL avec Nuqs
1. Installez nuqs : 2. Ajoutez NuqsAdapter dans votre layout racine : // app/layout.tsx export default function Layout( children : children: React.ReactNode )
Les query params sont préfixés par table id (votre tableType, par ex. products). Noms typiques : | Param | Exemple | Description | |-------|---------|-------------| | tableId-sort | products-sort | État du tri (tableau...
Les vues enregistrées sont construites depuis le même état basé sur l'URL. Le gestionnaire de vues est activé par défaut et peut être désactivé avec enableViews: false. Utilisez allowViewSave: false quand les utilisateu...
Ce que cette page couvre
La source MDX originale est condensee en cartes CMS natives pour edition et republication depuis le control plane.
1. Installez nuqs : 2. Ajoutez NuqsAdapter dans votre layout racine : // app/layout.tsx export default function Layout( children : children: React.ReactNode )
Les query params sont préfixés par table id (votre tableType, par ex. products). Noms typiques : | Param | Exemple | Description | |-------|---------|-------------| | tableId-sort | products-sort | État du tri (tableau...
Les vues enregistrées sont construites depuis le même état basé sur l'URL. Le gestionnaire de vues est activé par défaut et peut être désactivé avec enableViews: false. Utilisez allowViewSave: false quand les utilisateu...
Copier le lien – La barre d'outils peut proposer “Copy link” / “Share” avec l'URL courante (tous les paramètres table y sont déjà). Reset – Réinitialiser l'état de la table efface ces paramètres (ou restaure les valeurs...
Si vous rendez la table côté serveur (par ex. dans un Server Component), vous pouvez lire les mêmes paramètres depuis searchParams et passer des données initiales ou les utiliser dans votre Server Action. Le client hydr...
nuqs – Requis pour l'état URL. La table utilise useQueryState et des parseurs custom. Next.js – Utilisez nuqs/adapters/next/app pour l'App Router. Voir aussi : Provider & Setup
Notes d'implementation
Problèmes runtime fréquents et corrections
$ export default function Layout({ children }: { children: React.ReactNode }) {
$ return (
$ <html lang="en">
$ <body>
$ <NuqsAdapter>