Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Working with the Dashboard Page | Fetching and Displaying Data in Next.js
Next.js 14 Mastery for Building Modern Web Apps

bookWorking with the Dashboard Page

Let's focus on the dashboard page now and see the theory in action to understand the concept better.

Back to the Project

Copy and paste the code below into app/dashboard/page.tsx. Take a moment to explore the UI, but note that no data is present, so the live page will not show any changes.

Retrieving Data for IncomeChart

To fetch income data, import the fetchIncome function from the '@/app/lib/data' module and call it inside the Page component. Then, uncomment the IncomeChart component and check the live page.

Next, follow these steps to view the income chart:

  1. Visit the app/ui/dashboard/income-chart.tsx file.
  2. Uncomment the ready UI code.

This results in the following income chart on the live page.

In Practice

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 2

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.08

bookWorking with the Dashboard Page

Sveip for å vise menyen

Let's focus on the dashboard page now and see the theory in action to understand the concept better.

Back to the Project

Copy and paste the code below into app/dashboard/page.tsx. Take a moment to explore the UI, but note that no data is present, so the live page will not show any changes.

Retrieving Data for IncomeChart

To fetch income data, import the fetchIncome function from the '@/app/lib/data' module and call it inside the Page component. Then, uncomment the IncomeChart component and check the live page.

Next, follow these steps to view the income chart:

  1. Visit the app/ui/dashboard/income-chart.tsx file.
  2. Uncomment the ready UI code.

This results in the following income chart on the live page.

In Practice

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 2
some-alt