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 pratique afin de 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 n'affichera aucun changement.

 ### Récupération des données pour IncomeChart
Pour obtenir les données de revenus, importer la fonction `fetchIncome` depuis le module `'@/app/lib/data'` et l'appeler dans le composant `Page`. Ensuite, décommentez le composant `IncomeChart` et vérifiez la page en direct.


Ensuite, suivre ces étapes pour afficher le graphique des revenus :
1. Accéder au fichier `app/ui/dashboard/income-chart.tsx`.
2. Décommenter le code d'interface utilisateur prêt à l'emploi.

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

Apprenez à créer des applications web modernes et performantes avec Next.js. Configurez des projets avec des structures de mise en page, de la gestion du style et du routage pour une navigation fluide. Récupérez et affichez les données efficacement tout en optimisant le rendu et les performances. Mettez en œuvre des fonctionnalités avancées telles que la pagination, les opérations CRUD et la recherche globale pour des applications web dynamiques. Déployez vos projets Next.js, connectez-les à des bases de données et ajoutez une authentification pour protéger les données des utilisateurs.

Présentation des connaissances préalables nécessaires avant d’aborder le framework Next.js, aperçu des attentes du cours et description des projets à réaliser.

Nous allons configurer le projet, examiner les méthodes d’ajout de styles à notre application et aborder les aspects visuels tels que les images, les polices, les pages et les mises en page.

Découvrez comment créer et gérer facilement une nouvelle vue pour votre application et naviguer entre toutes les pages de manière fluide grâce à un système de routage intégré.

Déployer l'application Next.js en utilisant des comptes GitHub et Vercel. Établir également une base de données pour fournir à l'application les données nécessaires.

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

Découvrez comment mettre en œuvre des fonctionnalités web modernes telles que la pagination, les opérations CRUD, la recherche globale, la validation de formulaires, et plus encore.

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

Travail Avec la Page du Tableau de Bord

Retour au projet

Récupération des données pour IncomeChart

En pratique

Awesome!

Travail Avec la Page du Tableau de Bord

Retour au projet

Récupération des données pour IncomeChart

En pratique