Tipagem segura e Eficiência com next-safe-action no Next.js

Segurança e Eficiência com next-safe-action no Next.js

O next-safe-action é uma biblioteca poderosa para fortalecer a segurança e eficiência das Server Actions no Next.js, garantindo tipagem consistente e validação robusta para aplicações que utilizam o App Router.

📌 O que é o next-safe-action?

Essa biblioteca foi criada para evitar problemas comuns ao trabalhar com Server Actions, como dados não validados, erros silenciosos e tipagem inconsistente entre o backend e o frontend.

🔥 Principais Benefícios:

✅ API simples e intuitiva – fácil de integrar e usar.

✅ Segurança de tipos de ponta a ponta – evita erros de tipagem na comunicação entre cliente e servidor.

✅ Validação com Zod e outras bibliotecas – garante que apenas dados corretos sejam processados.

✅ Suporte a formulários (Form Actions) – facilita a submissão e tratamento de formulários.

✅ Middleware para autenticação e logs – permite adicionar camadas de segurança adicionais.

✅ Tratamento avançado de erros – fornece um fluxo estruturado para capturar erros e notificá-los corretamente.

✅ Otimizações na UI (atualizações otimistas) – melhora a experiência do usuário ao refletir mudanças instantaneamente.

---

🚀 Como Usar o next-safe-action no Next.js

1️⃣ Instalando a Biblioteca

Se você usa Zod para validação (recomendado), instale os pacotes necessários:

npm install next-safe-action zod

2️⃣ Criando um Cliente de Ação

No seu projeto, crie um cliente para centralizar as Server Actions.

// lib/safe-action.ts
import { createSafeActionClient } from 'next-safe-action';

export const actionClient = createSafeActionClient();

3️⃣ Definindo uma Server Action com Validação

Aqui criamos uma ação que atualiza um usuário, garantindo que os dados estejam corretos antes do processamento.

'use server';

import { z } from 'zod';
import { actionClient } from '@/lib/safe-action';

const UserSchema = z.object({
  id: z.string(),
  name: z.string().min(2, 'Nome muito curto'),
  email: z.string().email('E-mail inválido'),
});

export const updateUserAction = actionClient
  .schema(UserSchema)
  .action(async ({ parsedInput }) => {
    const { id, name, email } = parsedInput;

    // Simulando uma atualização no banco
    console.log(`Atualizando usuário ${id}: ${name} (${email})`);

    return { message: 'Usuário atualizado com sucesso!' };
  });

4️⃣ Consumindo a Server Action no Frontend

Agora, utilizamos essa ação em um formulário React.

'use client';

import { useAction } from 'next-safe-action';
import { updateUserAction } from '@/actions/user-actions';

function UserForm() {
  const { execute, result } = useAction(updateUserAction);

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    await execute(Object.fromEntries(formData));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="id" type="text" placeholder="ID do usuário" required />
      <input name="name" type="text" placeholder="Nome" required />
      <input name="email" type="email" placeholder="E-mail" required />
      <button type="submit">Atualizar</button>
      {result?.data && <p>{result.data.message}</p>}
      {result?.validationErrors && (
        <ul>
          {Object.entries(result.validationErrors).map(([field, errors]) => (
            <li key={field}>{`${field}: ${errors.join(', ')}`}</li>
          ))}
        </ul>
      )}
    </form>
  );
}

---

💡 Conclusão

O next-safe-action facilita o uso seguro e eficiente das Server Actions no Next.js, garantindo tipagem forte, validação confiável e experiência do usuário aprimorada. Se você está construindo aplicações modernas, essa biblioteca é uma excelente adição ao seu stack! 🚀