Gérer les paramètres de recherche dans Next.js avec Nuqs

Next.js est un outil puissant pour gérer les paramètres de recherche dans les applications React, en particulier avec l'introduction du routeur d'application et des fonctionnalités connexes dans les versions 13, 14 et 15. Cependant, la gestion de paramètres de recherche complexes peut encore être délicate. C'est là que nuqs, une bibliothèque de gestion d'état de paramètres de recherche sécurisée par type pour Next.js, entre en jeu. nuqs simplifie la gestion d'état en réduisant le code boilerplate pour gérer les paramètres d'URL, améliore la lisibilité du code avec une API déclarative, améliore les performances en parseant et en mettant à jour efficacement les paramètres de recherche, et offre une meilleure expérience de développement en raison de sa sécurité de type et de son intégration avec des outils populaires comme Zod pour améliorer le processus de développement. Pour commencer avec nuqs, initialisez une nouvelle application Next.js à l'aide de create-next-app@latest et installez nuqs en utilisant la commande npm install nuqs@latest ou yarn add nuqs. Ensuite, enveloppez vos {children} avec le composant NuqsAdapter dans votre fichier de mise en page racine. Cela définira et mettra à jour le paramètre de recherche lorsque vous tapez. Cependant, nuqs ne ré-renderise pas automatiquement les composants serveur. Pour résoudre ce problème, définissez l'option shallow sur false dans votre hook useQueryState. nuqs fournit également le hook useQueryStates pour gérer plusieurs paramètres de requête liés dans votre URL. Cela garantit que les modifications apportées à un filtre ne déclenchent pas de re-rendus inutiles ou d'incohérences, tout en prenant en charge les mises à jour par lots pour améliorer les performances.