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

Lad os nu fokusere på dashboard-siden og se teorien i praksis for bedre at forstå konceptet.

## Tilbage til projektet
Kopier og indsæt koden nedenfor i `app/dashboard/page.tsx`. Brug et øjeblik på at udforske brugergrænsefladen, men bemærk, at der ikke er nogen data til stede, så den viste side vil ikke vise nogen ændringer.

 ### Hentning af data til IncomeChart
For at hente indtægtsdata skal du importere funktionen `fetchIncome` fra modulet `'@/app/lib/data'` og kalde den inde i `Page`-komponenten. Fjern derefter kommenteringen af `IncomeChart`-komponenten og kontroller den levende side.


Følg derefter disse trin for at se indtægtsdiagrammet:
1. Gå til filen `app/ui/dashboard/income-chart.tsx`.
2. Fjern kommenteringen af den færdige UI-kode.

Dette resulterer i følgende indtægtsdiagram på den levende side.

Lær at opbygge moderne, højtydende webapplikationer med Next.js. Opsæt projekter med strukturerede layouts, styling og routing for problemfri navigation. Hent og vis data effektivt, mens du optimerer rendering og ydeevne. Implementer avancerede funktioner som paginering, CRUD-operationer og global søgning for dynamiske webapps. Udrul dine Next.js-projekter, tilslut dem til databaser, og tilføj autentificering for at beskytte brugerdata.

Vi gennemgår, hvad du bør have kendskab til, før du går i gang med Next.js-rammeværket, hvad du kan forvente af dette kursus, og hvilke projekter du kommer til at bygge.

Vi opsætter projektet, undersøger metoder til at tilføje styling til vores app og dækker visuelle aspekter såsom billeder, skrifttyper, sider og layouts.

Lær, hvordan du nemt opretter og administrerer et nyt view til din app og navigerer problemfrit gennem alle sider med et integreret routing-system.

Udrul Next.js-appen ved hjælp af GitHub- og Vercel-konti. Etabler desuden en database for at forsyne appen med de nødvendige data.

Overvej, hvordan data kan indhentes og vises for brugeren på en klar og effektiv måde.

Opdag, hvordan moderne webfunktioner som paginering, CRUD-operationer, global søgning, formularvalidering og mere implementeres.

Implementering af autentificering i Next.js.

Arbejde med Dashboard-siden

Tilbage til projektet

Hentning af data til IncomeChart

I praksis

Awesome!

Arbejde med Dashboard-siden

Tilbage til projektet

Hentning af data til IncomeChart

I praksis