Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Arbejde med Dashboard-siden | Hentning og Visning af Data i Next.js
Next.js 14 Ekspertise til Udvikling af Moderne Webapplikationer

bookArbejde med Dashboard-siden

Lad os nu fokusere på dashboard-siden og se teorien i praksis for bedre at forstå konceptet.

Tilbage til projektet

Kopier og indsæt koden nedenfor i app/dashboard/page.tsx. Brug et øjeblik på at udforske brugergrænsefladen, men bemærk, at der ikke er nogen data til stede, så den viste side vil ikke vise nogen ændringer.

Hentning af data til IncomeChart

For at hente indtægtsdata skal du importere funktionen fetchIncome fra modulet '@/app/lib/data' og kalde den inde i Page-komponenten. Fjern derefter kommenteringen af IncomeChart-komponenten og kontroller den levende side.

Følg derefter disse trin for at se indtægtsdiagrammet:

  1. Gå til filen app/ui/dashboard/income-chart.tsx.
  2. Fjern kommenteringen af den færdige UI-kode.

Dette resulterer i følgende indtægtsdiagram på den levende side.

I praksis

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

Suggested prompts:

What does the fetchIncome function do and where is it defined?

How do I uncomment the UI code in the income-chart.tsx file?

What should I do if the income chart does not display any data?

Awesome!

Completion rate improved to 2.08

bookArbejde med Dashboard-siden

Stryg for at vise menuen

Lad os nu fokusere på dashboard-siden og se teorien i praksis for bedre at forstå konceptet.

Tilbage til projektet

Kopier og indsæt koden nedenfor i app/dashboard/page.tsx. Brug et øjeblik på at udforske brugergrænsefladen, men bemærk, at der ikke er nogen data til stede, så den viste side vil ikke vise nogen ændringer.

Hentning af data til IncomeChart

For at hente indtægtsdata skal du importere funktionen fetchIncome fra modulet '@/app/lib/data' og kalde den inde i Page-komponenten. Fjern derefter kommenteringen af IncomeChart-komponenten og kontroller den levende side.

Følg derefter disse trin for at se indtægtsdiagrammet:

  1. Gå til filen app/ui/dashboard/income-chart.tsx.
  2. Fjern kommenteringen af den færdige UI-kode.

Dette resulterer i følgende indtægtsdiagram på den levende side.

I praksis

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 2
some-alt