Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Робота зі Сторінкою Панелі Керування | Отримання та Відображення Даних у Next.js
Майстерність Next.js 14 для Створення Сучасних Вебзастосунків

bookРобота зі Сторінкою Панелі Керування

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

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

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

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

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

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

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

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

На практиці

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

Як ми можемо покращити це?

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

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

bookРобота зі Сторінкою Панелі Керування

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

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

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

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

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

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

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

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

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

На практиці

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

Як ми можемо покращити це?

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

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