Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Arbeiten mit der Dashboard-Seite | Abrufen und Anzeigen von Daten in Next.js
Next.js 14 Mastery Für Den Aufbau Moderner Webanwendungen

bookArbeiten mit der Dashboard-Seite

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.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.08

bookArbeiten mit der Dashboard-Seite

Swipe um das Menü anzuzeigen

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.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 2
some-alt