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 jetzt auf die Dashboard-Seite und sehen uns die Theorie in Aktion an, um das Konzept besser zu verstehen.

## Zurück zum Projekt
Kopieren und fügen Sie den unten stehenden 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 die Live-Seite keine Änderungen anzeigt.

 ### Abrufen von Daten für IncomeChart
Um Einkommensdaten abzurufen, importieren Sie die Funktion `fetchIncome` aus dem Modul `'@/app/lib/data'` und rufen Sie sie innerhalb der `Page`-Komponente auf. Kommentieren Sie dann die `IncomeChart`-Komponente aus und überprüfen Sie die Live-Seite.


Als nächstes folgen Sie diesen Schritten, um das Einkommensdiagramm anzuzeigen:
1. Besuchen Sie die Datei `app/ui/dashboard/income-chart.tsx`.
2. Kommentieren Sie den fertigen UI-Code aus.

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

Next.js ist ein React-Framework, das für die Erstellung von Full-Stack-Webanwendungen entwickelt wurde. Mit Next.js nutzen Sie React, um Benutzeroberflächen zu erstellen, während Sie von zusätzlichen Funktionen und Optimierungen des Frameworks profitieren.

Lassen Sie uns besprechen, was Sie lernen müssen, bevor Sie in das Next.js-Framework eintauchen, was Sie von diesem Kurs erwarten können und was Sie bauen werden.

Wir werden das Projekt einrichten, Möglichkeiten zur Hinzufügung von Styling zu unserer App untersuchen und visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts behandeln.

Lernen Sie, wie Sie einfach eine neue Ansicht für Ihre App erstellen und verwalten und nahtlos durch alle Seiten mit einem integrierten Routing-System navigieren können.

Stellen Sie die Next.js-App mit GitHub- und Vercel-Konten bereit. Richten Sie zusätzlich eine Datenbank ein, um die App mit den notwendigen Daten zu versorgen.

Überlegen Sie, wie Sie Daten klar und effizient abrufen und dem Benutzer anzeigen können.

Entdecken Sie, wie Sie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und mehr implementieren.

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