Formulário com Server Actions no Next.js

Workshop

12 vídeos • 01:13:16

Seção 01 | Introdução

  1. 1.

    Apresentação do Projeto

    01:21
  2. 2.

    Requisitos do Mini Projeto

    06:37
  3. 3.

    Setup do Projeto

    05:58
  4. 4.

    A API a ser implementada

    01:53

Seção 02 | Requisito - Cadastrar Pedido

  1. 5.

    Nossa primeira Server Action

    04:54
  2. 6.

    Dados do formulário na Server Action

    08:29
  3. 7.

    Implementando a API na Action

    04:44
  4. 8.

    Loading com useFormStatus

    04:17
  5. 9.

    Validação no front com useFormState (useActionState)

    11:33
  6. 10.

    Fechando o modal após cadastro e formatando o número

    07:35

Seção 03 | Requisito - Apagar Pedido

  1. 11.

    Action para apagar pedido

    14:19

Seção 04 | Finalização

  1. 12.

    Recapitulando tudo

    01:36
Login
Workshops>Formulário com Server Actions no Next.js>Validação no front com useFormState (useActionState)

Acesso exclusivo para membros PRO

Esse conteúdo é exclusivo para nossos assinantes.

Libere esse e muito mais conteúdo assinando o Codante PRO.

Validação no front com useFormState (useActionState)

Vamos adicionar um toast para indicar sucesso ou erro na submissão de pedidos usando a biblioteca React Hot Toast. Após instalá-la, incluiremos o componente Toaster no layout da aplicação e configuraremos os toasts de sucesso e erro nos componentes apropriados. Para isso, utilizaremos o hook `useFormState` (ou `useActionState` em versões mais novas), permitindo comunicação entre a server action e o client component.

Comentários

(0)