Concentrons-nous maintenant sur la page du tableau de bord et voyons la théorie en action pour mieux comprendre le concept.

Retour au projet

Copiez et collez le code ci-dessous dans app/dashboard/page.tsx. Prenez un moment pour explorer l'interface utilisateur, mais notez qu'aucune donnée n'est présente, donc la page en direct ne montrera aucun changement.

Récupération des données pour IncomeChart

Pour récupérer les données de revenu, importez la fonction fetchIncome du module '@/app/lib/data' et appelez-la à l'intérieur du composant Page. Ensuite, décommentez le composant IncomeChart et vérifiez la page en direct.

Ensuite, suivez ces étapes pour afficher le graphique des revenus :

1. Visitez le fichier app/ui/dashboard/income-chart.tsx.
2. Décommentez le code UI prêt.

Cela donne le graphique des revenus suivant sur la page en direct.

En Pratique