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

Konzentrieren wir uns nun auf die Dashboard-Seite und sehen uns die Theorie in der Praxis an, um das Konzept besser zu verstehen.

## Zurück zum Projekt
Kopieren und fügen Sie den folgenden Code in `app/dashboard/page.tsx` ein. Nehmen Sie sich einen Moment Zeit, um die Benutzeroberfläche zu erkunden. Beachten Sie jedoch, dass keine Daten vorhanden sind, sodass auf der Live-Seite keine Änderungen angezeigt werden.

 ### Abrufen von Daten für IncomeChart
Um Einkommensdaten abzurufen, die Funktion `fetchIncome` aus dem Modul `'@/app/lib/data'` importieren und innerhalb der `Page`-Komponente aufrufen. Anschließend die `IncomeChart`-Komponente auskommentieren und die Live-Seite überprüfen.


Als Nächstes folgende Schritte ausführen, um das Einkommensdiagramm anzuzeigen:
1. Die Datei `app/ui/dashboard/income-chart.tsx` aufrufen.
2. Den bereitgestellten UI-Code auskommentieren.

Dies führt zu folgendem Einkommensdiagramm auf der Live-Seite.

Erlernen Sie den Aufbau moderner, leistungsstarker Webanwendungen mit Next.js. Richten Sie Projekte mit strukturierten Layouts, Styling und Routing für eine nahtlose Navigation ein. Effizientes Abrufen und Anzeigen von Daten bei gleichzeitiger Optimierung von Rendering und Performance. Implementieren Sie fortgeschrittene Funktionen wie Paginierung, CRUD-Operationen und globale Suche für dynamische Webanwendungen. Stellen Sie Ihre Next.js-Projekte bereit, verbinden Sie diese mit Datenbanken und fügen Sie Authentifizierung zum Schutz von Benutzerdaten hinzu.

Wir besprechen die erforderlichen Vorkenntnisse für die Arbeit mit dem Next.js-Framework, die Kursinhalte sowie die zu entwickelnden Projekte.

Wir richten das Projekt ein, untersuchen Möglichkeiten zur Einbindung von Styling in unsere Anwendung und behandeln visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts.

Erfahren Sie, wie Sie mühelos eine neue Ansicht für Ihre Anwendung erstellen und verwalten sowie mit einem integrierten Routingsystem nahtlos durch alle Seiten navigieren.

Bereitstellung der Next.js-App mit GitHub- und Vercel-Konten. Zusätzlich Einrichtung einer Datenbank zur Bereitstellung der erforderlichen Daten für die App.

Überlegungen zum klaren und effizienten Abrufen sowie zur Darstellung von Daten für den Benutzer.

Erfahren Sie, wie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und weitere implementiert werden.

Implementierung der Authentifizierung in Next.js.

Arbeiten mit der Dashboard-Seite

Zurück zum Projekt

Abrufen von Daten für IncomeChart

In der Praxis

Awesome!

Arbeiten mit der Dashboard-Seite

Zurück zum Projekt

Abrufen von Daten für IncomeChart

In der Praxis