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

Keskitytään nyt dashboard-sivuun ja tarkastellaan teoriaa käytännössä, jotta konsepti tulee selkeämmäksi.

## Takaisin projektiin
Kopioi ja liitä alla oleva koodi tiedostoon `app/dashboard/page.tsx`. Tutustu hetki käyttöliittymään, mutta huomaa, että dataa ei ole vielä saatavilla, joten live-sivulla ei näy muutoksia.

 ### Tietojen hakeminen IncomeChart-komponentille
Tulojen hakemista varten tuo `fetchIncome`-funktio moduulista `'@/app/lib/data'` ja kutsu sitä `Page`-komponentin sisällä. Poista sitten kommentointi `IncomeChart`-komponentilta ja tarkista sivu livenä.


Seuraavaksi etene näin nähdäksesi tulokaavion:
1. Siirry tiedostoon `app/ui/dashboard/income-chart.tsx`.
2. Poista valmiin käyttöliittymäkoodin kommentointi.

Tämä tuottaa seuraavan tulokaavion live-sivulle.

Opi rakentamaan moderneja, suorituskykyisiä web-sovelluksia Next.js:llä. Luo projekteja, joissa on jäsennelty ulkoasu, tyylittely ja reititys sujuvaa navigointia varten. Nouda ja näytä dataa tehokkaasti samalla kun optimoit renderöintiä ja suorituskykyä. Toteuta edistyneitä ominaisuuksia, kuten sivutus, CRUD-toiminnot ja globaali haku dynaamisia web-sovelluksia varten. Julkaise Next.js-projektisi, yhdistä ne tietokantoihin ja lisää autentikointi käyttäjätietojen suojaamiseksi.

Käydään läpi, mitä tulee hallita ennen Next.js-kehykseen perehtymistä, mitä tältä kurssilta voi odottaa ja mitä tulet rakentamaan.

Projektin perustaminen, tyylien lisäämistavat sovellukseen sekä visuaalisten osa-alueiden, kuten kuvien, fonttien, sivujen ja asetteluiden käsittely.

Opi luomaan ja hallitsemaan sovelluksesi uusia näkymiä vaivattomasti sekä navigoimaan saumattomasti kaikkien sivujen välillä sisäänrakennetun reititysjärjestelmän avulla.

Ota Next.js-sovellus käyttöön GitHub- ja Vercel-tunnusten avulla. Perusta lisäksi tietokanta, joka toimittaa sovellukselle tarvittavat tiedot.

Pohdi, miten data hankitaan ja esitetään käyttäjälle selkeästi ja tehokkaasti.

Opi toteuttamaan moderneja verkkosivustojen ominaisuuksia, kuten sivutus, CRUD-toiminnot, globaali haku, lomakkeiden validointi ja paljon muuta.

Työskentely Dashboard-sivun Kanssa

Takaisin projektiin

Tietojen hakeminen IncomeChart-komponentille

Käytännössä

Awesome!

Työskentely Dashboard-sivun Kanssa

Takaisin projektiin

Tietojen hakeminen IncomeChart-komponentille

Käytännössä