Вивчайте Робота зі Сторінкою Панелі Керування | Отримання та Відображення Даних у Next.js

Тепер зосередьмося на сторінці панелі керування та розгляньмо теорію на практиці, щоб краще зрозуміти концепцію.

Повернення до проєкту

Скопіюйте та вставте наведений нижче код у app/dashboard/page.tsx. Ознайомтеся з інтерфейсом користувача, але зверніть увагу, що дані відсутні, тому на живій сторінці зміни не відображатимуться.

Отримання даних для IncomeChart

Щоб отримати дані про дохід, імпортуйте функцію fetchIncome з модуля '@/app/lib/data' та викличте її всередині компонента Page. Далі розкоментуйте компонент IncomeChart і перевірте сторінку в реальному часі.

Далі виконайте наступні кроки для перегляду графіка доходу:

Перейдіть до файлу app/ui/dashboard/income-chart.tsx.
Розкоментуйте готовий код інтерфейсу.

У результаті на сторінці з’явиться наступний графік доходу.

На практиці

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 2

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

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

Свайпніть щоб показати меню