Summary  
This chapter demonstrates how to implement an async page component that awaits fetched data, passes it as props to child components, and uses array mapping with conditional rendering to build a dynamic chart UI.  

General domain of usage  
Dashboard data visualization

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.

Next.js est un framework React conçu pour créer des applications web full-stack. Avec Next.js, vous utilisez React pour construire des interfaces utilisateur tout en bénéficiant de fonctionnalités supplémentaires et d'optimisations fournies par le framework.

Discutons de ce que vous devez apprendre avant de plonger dans le framework Next.js, de ce à quoi vous pouvez vous attendre de ce cours, et de ce que vous allez construire.

Nous allons configurer le projet, examiner les moyens d'ajouter du style à notre application et couvrir les aspects visuels tels que les images, les polices, les pages et les mises en page.

Apprenez à créer et gérer facilement une nouvelle vue pour votre application et à naviguer sans effort à travers toutes les pages grâce à un système de routage intégré.

Déployez l'application Next.js en utilisant des comptes GitHub et Vercel. De plus, établissez une base de données pour fournir à l'application les données nécessaires.

Considérez comment obtenir et afficher les données à l'utilisateur de manière claire et efficace.

Découvrez comment implémenter des fonctionnalités web modernes telles que la pagination, les opérations CRUD, la recherche globale, la validation de formulaire, et plus encore.

Mise en œuvre de l'authentification dans Next.js.

Travailler Avec la Page du Tableau de Bord

Retour au projet

Récupération des données pour IncomeChart

En Pratique

Awesome!

Travailler Avec la Page du Tableau de Bord

Retour au projet

Récupération des données pour IncomeChart

En Pratique