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

Concentriamoci ora sulla pagina della dashboard e vediamo la teoria in pratica per comprendere meglio il concetto.

## Ritorno al progetto
Copia e incolla il codice qui sotto in `app/dashboard/page.tsx`. Dedica qualche istante a esplorare l'interfaccia utente, ma nota che non sono presenti dati, quindi la pagina live non mostrerà alcuna modifica.

 ### Recupero dei dati per IncomeChart
Per recuperare i dati relativi alle entrate, importa la funzione `fetchIncome` dal modulo `'@/app/lib/data'` e chiamala all'interno del componente `Page`. Successivamente, decommenta il componente `IncomeChart` e verifica la pagina live.


Successivamente, seguire questi passaggi per visualizzare il grafico delle entrate:
1. Accedere al file `app/ui/dashboard/income-chart.tsx`.
2. Decommentare il codice UI già pronto.

Questo produce il seguente grafico delle entrate nella pagina live.

Impara a creare applicazioni web moderne e ad alte prestazioni utilizzando Next.js. Configura progetti con layout strutturati, stile e routing per una navigazione fluida. Recupera e visualizza dati in modo efficiente ottimizzando il rendering e le prestazioni. Implementa funzionalità avanzate come paginazione, operazioni CRUD e ricerca globale per applicazioni web dinamiche. Distribuisci i tuoi progetti Next.js, collegali a database e aggiungi l'autenticazione per proteggere i dati degli utenti.

Discutiamo le conoscenze necessarie prima di approfondire il framework Next.js, cosa aspettarsi da questo corso e cosa realizzerai.

Imposteremo il progetto, esamineremo i metodi per aggiungere lo stile alla nostra applicazione e tratteremo aspetti visivi come immagini, font, pagine e layout.

Scopri come creare e gestire facilmente una nuova vista per la tua applicazione e navigare tra tutte le pagine senza interruzioni grazie a un sistema di routing integrato.

Distribuire l'app Next.js utilizzando account GitHub e Vercel. Inoltre, configurare un database per fornire all'app i dati necessari.

Considerare come ottenere e mostrare i dati all'utente in modo chiaro ed efficiente.

Scopri come implementare funzionalità web moderne come paginazione, operazioni CRUD, ricerca globale, validazione dei moduli e altro ancora.

Implementazione dell'autenticazione in Next.js.

Lavorare con la Pagina Dashboard

Ritorno al progetto

Recupero dei dati per IncomeChart

In pratica

Awesome!

Lavorare con la Pagina Dashboard

Ritorno al progetto

Recupero dei dati per IncomeChart

In pratica