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Завдання: Отримання та Відображення Даних

Зосередьмося на наступному компоненті — LatestInvoices. Його призначення — відображати останні п’ять рахунків, відсортованих у хронологічному порядку за датою.

Може здатися, що це легко реалізувати за допомогою JavaScript. Однак, із розширенням застосунку та збільшенням обсягу даних, краще виконувати сортування та обмеження рахунків за допомогою SQL. Такий підхід запобігає перевантаженню фронтенду зайвими обчисленнями.

Щоб переглянути функцію fetchLatestInvoices, перейдіть до app/lib/data.ts.

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

Ми використаємо функцію fetchLatestInvoices на сторінці панелі керування для отримання найновіших рахунків і відображення їх за допомогою компонента LatestInvoices.

Не забудьте відкрити app/ui/dashboard/latest-invoices.tsx і розкоментувати наданий інтерфейс.

Завдання

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

На сторінці панелі керування використовується компонент Card. Ваше завдання — імпортувати функцію fetchCardData, яка надає:

  • numberOfSellers;
  • numberOfInvoices;
  • totalFulfilledInvoices;
  • totalAwaitingInvoices.

Виходячи з отриманих даних, розкоментуйте відповідний компонент Card.

Результат

На практиці

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Awesome!

Completion rate improved to 2.08

bookЗавдання: Отримання та Відображення Даних

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

Зосередьмося на наступному компоненті — LatestInvoices. Його призначення — відображати останні п’ять рахунків, відсортованих у хронологічному порядку за датою.

Може здатися, що це легко реалізувати за допомогою JavaScript. Однак, із розширенням застосунку та збільшенням обсягу даних, краще виконувати сортування та обмеження рахунків за допомогою SQL. Такий підхід запобігає перевантаженню фронтенду зайвими обчисленнями.

Щоб переглянути функцію fetchLatestInvoices, перейдіть до app/lib/data.ts.

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

Ми використаємо функцію fetchLatestInvoices на сторінці панелі керування для отримання найновіших рахунків і відображення їх за допомогою компонента LatestInvoices.

Не забудьте відкрити app/ui/dashboard/latest-invoices.tsx і розкоментувати наданий інтерфейс.

Завдання

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

На сторінці панелі керування використовується компонент Card. Ваше завдання — імпортувати функцію fetchCardData, яка надає:

  • numberOfSellers;
  • numberOfInvoices;
  • totalFulfilledInvoices;
  • totalAwaitingInvoices.

Виходячи з отриманих даних, розкоментуйте відповідний компонент Card.

Результат

На практиці

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

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

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

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