Concentriamoci sulle operazioni CRUD. In precedenza, ci siamo limitati a leggere i dati dal server e mostrarli all'utente. Ora, spostiamo l'attenzione sulla creazione, modifica ed eliminazione dei dati. Tutto questo verrà applicato alla pagina delle fatture.

Teoria

Prima di passare all'implementazione, consideriamo il termine Server Actions in Next.js

Le Server Actions consentono di eseguire codice specifico direttamente sul server. Invece di creare metodi complessi per modificare i dati, è possibile utilizzare queste azioni.

Perché le Server Actions sono importanti?

Le applicazioni web devono essere sicure, poiché possono essere soggette a diversi tipi di attacchi. Le Server Actions contribuiscono notevolmente alla sicurezza. Utilizzano varie tecniche come richieste speciali, messaggi codificati, controlli rigorosi e restrizioni per proteggere l'applicazione dagli attacchi, salvaguardare i dati e garantire che solo le persone autorizzate possano accedervi.

Come si utilizzano i form con le Server Actions?

È possibile creare form che utilizzano le Server Actions. In termini semplici, si inserisce un codice speciale nel form per indicare quale azione eseguire. Questa azione riceve automaticamente i dati inseriti nel form.

// 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>;
}