Створення рахунку — покроково

1. Створення форми: Спочатку необхідно створити форму для введення даних. Саме тут користувач вводить інформацію для нового рахунку;
2. Використання серверної дії: Створіть спеціальну дію на сервері для обробки даних форми. Коли хтось заповнює форму, ця дія викликається;
3. Отримання даних з форми: Усередині серверної дії отримайте інформацію з форми. Це схоже на розпакування коробки — потрібно побачити, що всередині;
4. Перевірка та підготовка даних: Перевірте дані та переконайтеся, що вони коректні. Це як перевірка інгредієнтів для рецепту — вони мають бути свіжими та правильними. Коли все гаразд, підготуйте дані для збереження у базі даних;
5. Додавання даних: Збережіть дані у базі даних;
6. Оновлення кешу та повернення на сторінку рахунків: Після додавання даних оновіть кеш. Це гарантує, що всі отримають найактуальнішу інформацію. Потім поверніть користувача на сторінку рахунків, щоб він міг побачити новий створений рахунок.

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

1. Створення форми

Створіть нову папку з назвою 'create' у директорії app/dashboard/invoices. Створіть новий файл з ім’ям page.tsx у цій папці. Цей файл буде новою сторінкою, яка дозволяє користувачам створювати рахунок-фактуру.

Скопіюйте та вставте наступний код у файл page.tsx:

Сторінка використовує серверний компонент для збору інформації про користувача, а потім передає її до готового компонента <Form>. Ось структура компонента <Form>:

• Випадаючий список для користувачів;
• Поле введення для суми;
• Радіокнопки для статусу;
• Кнопка для підтвердження.

Якщо натиснути кнопку "Create Invoice", ви будете перенаправлені до форми, яка запропонує заповнити необхідну інформацію.

2. Використання Server Action

1. Перейдіть до каталогу lib;
2. Створіть новий файл з назвою actions.ts;
3. Додайте директиву 'use server' на початку файлу;
   • Чому 'use server'? – Це дозволяє функціям бути універсальними та використовуватись як у Client, так і у Server компонентах. Це зручний спосіб організувати Server Actions, але їх також можна розміщувати безпосередньо у Server Components за потреби.
4. Створення функції Server Action.

Далі, у компоненті <Form>, імпортуйте createInvoice з файлу actions.ts. Додайте атрибут action до елемента <form> і викликайте дію createInvoice.

3. Отримання даних з форми

Поверніться до app/lib/actions.ts, щоб отримати значення з formData за допомогою методу .get(name). Після виконання цього завдання ви зможете заповнити форму та переглянути введені дані у терміналі.

Результат:

4. Перевірка та підготовка даних

Перед збереженням даних форми у базі даних важливо переконатися, що вони мають правильний формат і відповідні типи. У цьому курсі використовується певний формат для даних таблиці invoice.

Щоб спростити цей процес, існує декілька варіантів для перевірки типів. Замість ручної перевірки типів можна скористатися Zod — бібліотекою валідації, орієнтованою на TypeScript. Це зручний інструмент, який спрощує задачу перевірки.

Ось що потрібно зробити у файлі actions.ts:

1. Імпортувати Zod у файл actions.ts;
2. Створити схему за допомогою Zod, яка відповідає структурі об'єкта форми. Ця схема виступає набором правил, що гарантують коректність formData перед збереженням у базі даних.

Далі передаємо rawFormData у CreateInvoice для перевірки типів.

Перетворення суми у центи та створення нової дати у форматі "YYYY-MM-DD" за допомогою стандартного JavaScript.

5. Вставка даних

Тепер, коли всі необхідні значення отримано, можна скористатися sql для їх надсилання до бази даних.

6. Оновлення кешу та повернення до рахунків

Next.js має корисну функцію — кеш маршрутизатора на стороні клієнта. Вона відстежує, де користувачі перебували на сайті протягом певного часу. Цей кеш у поєднанні з попереднім завантаженням забезпечує швидке перемикання між сторінками без надмірного навантаження на сервер.

Ось що потрібно зробити:

1. Оскільки дані на сторінці рахунків оновлено, важливо, щоб користувачі бачили актуальну інформацію. Для цього очищаємо кеш за допомогою функції revalidatePath. Це гарантує, що на сервер буде надіслано новий запит для отримання найсвіжіших даних;
2. Після оновлення даних та очищення кешу потрібно плавно повернути користувача на сторінку рахунків. Для цього використовується функція redirect. Це як надати їм чіткі вказівки для повернення.

На практиці