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

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.08

bookWorking with the Dashboard Page

Stryg for at vise menuen

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

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 2
some-alt