Vamos focar nas operações CRUD. Anteriormente, estávamos apenas lendo dados do servidor e exibindo-os para o usuário. Agora, vamos direcionar nosso foco para a criação, atualização e exclusão de dados. Tudo isso será feito na página de faturas.

Teoria

Antes de iniciar a implementação, vamos considerar o termo Server Actions no Next.js

Server Actions permitem executar código especial diretamente no servidor. Em vez de criar métodos complicados para alterar seus dados, é possível utilizar essas ações.

Por que Server Actions são importantes?

Aplicações web precisam ser seguras, pois podem sofrer diferentes tipos de ataques. Server Actions contribuem significativamente para a segurança. Elas utilizam diversas técnicas, como requisições especiais, mensagens codificadas, verificações rigorosas e restrições para manter seu aplicativo protegido contra ataques, proteger seus dados e garantir que apenas pessoas autorizadas tenham acesso.

Como utilizar formulários com Server Actions?

É possível criar formulários que utilizam Server Actions. Em termos simples, adiciona-se um código especial no formulário para indicar qual ação deve ser executada. Essa ação recebe automaticamente os dados inseridos no formulário.

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