Contenido del Curso
Next.js 14
Next.js 14
Working 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:
- Visit the
app/ui/dashboard/income-chart.tsx
file. - Uncomment the ready UI code.
This results in the following income chart on the live page.
In Practice
¡Gracias por tus comentarios!