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

La oss nå fokusere på dashbord-siden og se teorien i praksis for å forstå konseptet bedre.

## Tilbake til prosjektet
Kopier og lim inn koden under i `app/dashboard/page.tsx`. Ta deg tid til å utforske brukergrensesnittet, men merk at ingen data er tilstede, så den aktive siden vil ikke vise noen endringer.

 ### Hente data for IncomeChart
For å hente inntektsdata, importer funksjonen `fetchIncome` fra modulen `'@/app/lib/data'` og kall den inne i `Page`-komponenten. Deretter, fjern kommentaren på `IncomeChart`-komponenten og kontroller den aktive siden.


Følg deretter disse trinnene for å vise inntektsdiagrammet:
1. Gå til filen `app/ui/dashboard/income-chart.tsx`.
2. Fjern kommentaren på den ferdige UI-koden.

Dette gir følgende inntektsdiagram på den aktive siden.

Lær å bygge moderne, høytytende webapplikasjoner med Next.js. Sett opp prosjekter med strukturerte oppsett, styling og ruting for sømløs navigasjon. Hent og vis data effektivt samtidig som du optimaliserer rendering og ytelse. Implementer avanserte funksjoner som paginering, CRUD-operasjoner og globalt søk for dynamiske webapplikasjoner. Distribuer dine Next.js-prosjekter, koble dem til databaser og legg til autentisering for å beskytte brukerdata.

Vi skal diskutere hva du bør kunne før du begynner med Next.js-rammeverket, hva du kan forvente av dette kurset, og hva du kommer til å bygge.

Vi setter opp prosjektet, undersøker måter å legge til styling i appen vår på, og dekker visuelle aspekter som bilder, fonter, sider og oppsett.

Lær hvordan du enkelt kan opprette og administrere et nytt visningsbilde for applikasjonen din, samt navigere sømløst mellom alle sider med et integrert rutingsystem.

Distribuer Next.js-appen ved hjelp av GitHub- og Vercel-kontoer. Etabler i tillegg en database for å levere nødvendig data til appen.

Vurder hvordan data kan hentes og vises for brukeren på en tydelig og effektiv måte.

Lær hvordan du implementerer moderne nettfunksjoner som paginering, CRUD-operasjoner, globalt søk, skjemavalidering og mer.

Implementering av autentisering i Next.js.

Arbeide med dashbordsiden

Tilbake til prosjektet

Hente data for IncomeChart

I praksis

Awesome!

Arbeide med dashbordsiden

Tilbake til prosjektet

Hente data for IncomeChart

I praksis