Page des Factures

Félicitations ! Nous avons couvert tous les concepts fondamentaux de Next.js. Vous êtes maintenant prêt à créer divers types d'applications en utilisant Next.js.

En avançant, nous allons explorer des concepts avancés qui sont optionnels pour certaines applications ou projets. Cependant, acquérir des connaissances sur ces concepts peut être très bénéfique.

Retour au projet

Concentrons-nous 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'inspecter et de comprendre l'objectif de ce code.

L'application a 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 URL pour gérer l'état de recherche, ce qui pourrait être nouveau si vous êtes habitué à utiliser un état côté client.

Les avantages incluent :

• Les utilisateurs peuvent mettre en signet 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 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 des utilisateurs devient plus facile, nécessitant moins de logique côté client.

Poursuivons avec cette idée dans le chapitre à venir.

En Pratique