Зосередження на операціях CRUD. Раніше виконувалося лише читання даних із сервера та відображення їх користувачу. Тепер акцент зміщується на створення, оновлення та видалення даних. Усі ці дії виконуватимуться для сторінки рахунків.

Теорія

Перш ніж перейти до реалізації, розглянемо термін Server Actions у Next.js

Server Actions дозволяють виконувати спеціальний код безпосередньо на сервері. Замість створення складних механізмів для зміни даних можна використовувати ці дії.

Чому Server Actions важливі?

Вебзастосунки повинні бути захищеними, оскільки вони можуть піддаватися різним атакам. Server Actions значно підвищують безпеку. Вони застосовують різні техніки, такі як спеціальні запити, закодовані повідомлення, суворі перевірки та обмеження, щоб захистити ваш застосунок від атак, зберегти дані та гарантувати доступ лише авторизованим користувачам.

Як використовувати форми з Server Actions?

Можна створювати форми, які використовують Server Actions. Простіше кажучи, у форму додається спеціальний код, який визначає, яку дію виконати. Ця дія автоматично отримує дані, введені у форму.

// Server Component
export default function Page() {
  // Action
  async function create(formData: FormData) {
    'use server';
 
    // Logic to change data...
  }
 
  // Put the action in the `action` attribute
  return <form action={create}>...</form>;
}