Arbeiten mit der Dashboard-Seite

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.

In der Praxis