Next.js 15 Fullstack (App Router + Server Actions) · Aula

Validação e Tratamento de Erros em Ações de Servidor

Crie Ações de Servidor robustas validando a entrada com Zod, retornando estados de erro estruturados e exibindo-os nos formulários com useActionState.

Validação e Tratamento de Erros em Ações de Servidor é uma aula grátis de Next.js 15 Fullstack (App Router + Server Actions) no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Next.js 15 Fullstack (App Router + Server Actions), e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 3 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Why Validate Server Actions?

Server Actions receive data straight from the client, which can never be trusted. Validation guards against malformed input, injection, and broken business rules before anything touches your database.

Reading FormData

A Server Action bound to a form receives a FormData object. You read fields by name, but every value arrives as a string.

'use server';
export async function createPost(formData: FormData) {
  const title = formData.get('title');
  const views = formData.get('views');
}

Defining a Zod Schema

Zod declares the shape and rules of your data. coerce converts string form values into the right types automatically.

import { z } from 'zod';
const PostSchema = z.object({
  title: z.string().min(3, 'Title too short'),
  views: z.coerce.number().int().min(0)
});

Safe Parsing

Use safeParse instead of parse so validation failures return a result object rather than throwing. Inspect success to branch.

const parsed = PostSchema.safeParse({
  title: formData.get('title'),
  views: formData.get('views')
});
if (!parsed.success) {
  // handle errors
}

Returning a Structured Error State

Rather than throwing, return an object describing what went wrong. Field-level messages let the UI show errors next to the right input.

if (!parsed.success) {
  return {
    errors: parsed.error.flatten().fieldErrors,
    message: 'Validation failed'
  };
}

Wiring useActionState

On the client, useActionState tracks the value your action returns. It gives you the latest state and a wrapped action to pass to the form.

'use client';
const [state, formAction] = useActionState(createPost, { errors: {} });

Displaying Field Errors

Render messages from state.errors beneath each field so users see exactly what to fix.

<input name="title" />
{state.errors?.title && (
  <p className="error">{state.errors.title[0]}</p>
)}

Catching Unexpected Errors

Validation handles bad input, but database or network calls can still fail. Wrap them in try/catch and return a friendly message instead of leaking internals.

try {
  await prisma.post.create({ data: parsed.data });
} catch (e) {
  return { message: 'Database error. Please try again.' };
}

Revalidating on Success

After a successful write, call revalidatePath so cached pages refetch and the new data appears immediately.

import { revalidatePath } from 'next/cache';
revalidatePath('/posts');
return { message: 'Post created!' };

Never Trust the Client

Client-side validation improves UX but can be bypassed. Always re-validate on the server. The Server Action is your real security boundary.

Best Practices

Robust actions follow a pattern:

Validate with Zod safeParse
Return structured field errors
Surface them with useActionState
Wrap side effects in try/catch
Revalidate on success

Quick Check

Test your validation knowledge.

Recap

You hardened your Server Actions:

Validate FormData with a Zod schema and safeParse
Return structured errors and a message
Track them with useActionState and render per field
Catch runtime failures and revalidate on success

Your forms now fail gracefully and stay secure.

Perguntas Frequentes

A aula “Validação e Tratamento de Erros em Ações de Servidor” é grátis?

Sim — o texto completo de “Validação e Tratamento de Erros em Ações de Servidor” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Next.js 15 Fullstack (App Router + Server Actions), atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack (App Router + Server Actions) inclui 3 aulas no total.

O que vou aprender em “Validação e Tratamento de Erros em Ações de Servidor”?

Crie Ações de Servidor robustas validando a entrada com Zod, retornando estados de erro estruturados e exibindo-os nos formulários com useActionState. Você pratica Next.js 15 Fullstack (App Router + Server Actions) com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Next.js 15 Fullstack (App Router + Server Actions)?

Nenhuma experiência prévia é necessária. Next.js 15 Fullstack (App Router + Server Actions) no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.

Quanto tempo leva a aula “Validação e Tratamento de Erros em Ações de Servidor”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Next.js 15 Fullstack (App Router + Server Actions)?

Sim. Cada aula de Next.js 15 Fullstack (App Router + Server Actions) inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Atualizações otimistas da interface
Envio de arquivos com Actions
Validação e Tratamento de Erros em Ações de Servidor

← Voltar para Next.js 15 Fullstack (App Router + Server Actions)