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

Låt oss nu fokusera på dashboardsidan och se teorin i praktiken för att bättre förstå konceptet.

## Tillbaka till projektet
Kopiera och klistra in koden nedan i `app/dashboard/page.tsx`. Utforska gärna användargränssnittet, men observera att ingen data finns tillgänglig, så den aktiva sidan kommer inte att visa några förändringar.

 ### Hämta data för IncomeChart
För att hämta inkomstdata, importera funktionen `fetchIncome` från modulen `'@/app/lib/data'` och anropa den inuti `Page`-komponenten. Avkommentera sedan `IncomeChart`-komponenten och kontrollera den aktiva sidan.


Följ därefter dessa steg för att visa inkomstdiagrammet:
1. Besök filen `app/ui/dashboard/income-chart.tsx`.
2. Avkommentera den färdiga UI-koden.

Detta resulterar i följande inkomstdiagram på den aktiva sidan.

Lär dig att bygga moderna, högpresterande webbapplikationer med Next.js. Sätt upp projekt med strukturerade layouter, styling och routing för smidig navigering. Hämta och visa data effektivt samtidigt som rendering och prestanda optimeras. Implementera avancerade funktioner som paginering, CRUD-operationer och global sökning för dynamiska webbappar. Distribuera dina Next.js-projekt, anslut dem till databaser och lägg till autentisering för att skydda användardata.

Vi diskuterar vad du behöver kunna innan du börjar med Next.js-ramverket, vad du kan förvänta dig av denna kurs och vad du kommer att bygga.

Vi kommer att konfigurera projektet, undersöka olika sätt att lägga till styling i vår app och behandla visuella aspekter såsom bilder, typsnitt, sidor och layouter.

Lär dig att enkelt skapa och hantera en ny vy för din applikation samt navigera mellan alla sidor smidigt med ett inbyggt routingsystem.

Distribuera Next.js-appen med hjälp av GitHub- och Vercel-konton. Upprätta dessutom en databas för att förse appen med nödvändig data.

Överväg hur data kan erhållas och presenteras för användaren på ett tydligt och effektivt sätt.

Utforska hur moderna webbtekniker som paginering, CRUD-operationer, global sökning, formulärvalidering och mer implementeras.

Implementering av autentisering i Next.js.

Arbete med Instrumentpanelsidan

Tillbaka till projektet

Hämta data för IncomeChart

I praktiken

Awesome!

Arbete med Instrumentpanelsidan

Tillbaka till projektet

Hämta data för IncomeChart

I praktiken