Course Content
Next.js 14
Next.js 14
Practice and Challenge: Retrieving Data
Let's focus on the next component, LatestInvoices
. Its purpose is to display the last five invoices, sorted chronologically by date.
You might think that achieving this with JavaScript is straightforward. However, as the app grows and more data appears, it's preferable to handle the sorting and limiting of invoices using SQL. This approach prevents overloading the frontend with unnecessary calculations.
To inspect the fetchLatestInvoices
function, please visit app/lib/data.ts
.
Back to the Project
We'll employ the fetchLatestInvoices
function on the dashboard page to retrieve the most recent invoices and display them using the LatestInvoices
component.
Don't forget to visit app/ui/dashboard/latest-invoices.tsx
and uncomment the provided UI.
Challenge
Now, it's your chance to fetch the data and present the information to the user.
Primarily, we have a Card
component on the dashboard page. Your task is to import the fetchCardData
function, which provides:
numberOfSellers
;numberOfInvoices
;totalFulfilledInvoices
;totalAwaitingInvoices
.
Based on the retrieved data, uncomment the corresponding Card
component.
Result
In Practice
Thanks for your feedback!