Laten we ons nu richten op de dashboardpagina en de theorie in de praktijk bekijken om het concept beter te begrijpen.

Terug naar het project

Kopieer en plak de onderstaande code in app/dashboard/page.tsx. Neem even de tijd om de gebruikersinterface te verkennen, maar let op dat er geen gegevens aanwezig zijn, waardoor er geen wijzigingen zichtbaar zijn op de livepagina.

Gegevens ophalen voor IncomeChart

Om inkomensgegevens op te halen, importeer de functie fetchIncome uit de module '@/app/lib/data' en roep deze aan binnen de Page-component. Vervolgens deactiveer je het commentaar op de IncomeChart-component en controleer je de live pagina.

Volg vervolgens deze stappen om het inkomensdiagram te bekijken:

1. Ga naar het bestand app/ui/dashboard/income-chart.tsx.
2. Verwijder het commentaar van de gereedstaande UI-code.

Dit resulteert in het volgende inkomensdiagram op de live pagina.

In de praktijk