Félicitations ! Nous avons couvert tous les concepts fondamentaux de Next.js. Vous êtes désormais prêt à créer différents types d'applications avec Next.js.

À présent, nous allons explorer des concepts avancés, qui restent optionnels pour certains projets ou applications. Toutefois, la maîtrise de ces notions peut s’avérer très avantageuse.

Retour au projet

Concentrons-nous maintenant sur la page des factures et poursuivons son développement.

Veuillez copier et coller le code suivant dans app/dashboard/invoices/page.tsx. Prenez le temps d’examiner et de comprendre l’objectif de ce code.

L'application possède trois fonctionnalités clés :

• Search permet aux utilisateurs de rechercher des factures spécifiques ;
• Pagination leur permet de naviguer entre les pages de factures ;
• Table affiche toutes les factures disponibles.

Nous utiliserons les paramètres de recherche de l’URL pour gérer l’état de la recherche, ce qui peut être nouveau si vous êtes habitué à utiliser un état côté client.

Les avantages incluent :

• Les utilisateurs peuvent ajouter aux favoris ou partager l’état actuel de l’application, y compris les requêtes de recherche et les filtres, car les paramètres font partie de l’URL ;
• Les paramètres d’URL facilitent le rendu côté serveur, simplifiant directement la configuration de l’état initial sur le serveur ;
• Avec les détails de recherche dans l’URL, le suivi du comportement utilisateur devient plus simple, nécessitant moins de logique côté client.

Nous allons poursuivre avec cette idée dans le prochain chapitre.

En pratique