felipesdev
LightNews LightNews
luis.yorpex.app
felipesdev
@luis.yorpex.app
30 followers 4 following 4 posts
https://yorpex.app
Posts Replies Media Videos
luis.yorpex.app
5️⃣ Vamos criar o Client Component do formulário, com elementos @shadcn.com para um design elegante e moderno
🔹 Instale ShadCN/UI em: ui.shadcn.com/docs/install...
🔹 Instale o componente de formulário em: ui.shadcn.com/docs/compone...

6️⃣ Por fim, integre o componente na página do seu projeto Next.js:
Código do componente do formulário. import { CreateProjectForm } from "@/components/create-project"; import { Card, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; export default function HomePage() { return ( <main className="flex min-h-screen items-center justify-center"> <Card className="w-[350px] shadow-lg"> <CardHeader> <CardTitle>Criar novo projeto</CardTitle> <CardDescription> Implemente seu novo projeto em um clique. </CardDescription> </CardHeader> <CreateProjectForm /> </Card> </main> ); }
September 1, 2024 at 8:58 PM
luis.yorpex.app
3️⃣ Agora, vamos criar o arquivo de validação de tipos para garantir que os dados do formulário estejam no formato correto

4️⃣ Em seguida, crie as server-actions para processar os dados do formulário no servidor(simulando um delay de 1 segundo):
import { z } from "zod"; export const projectSchema = z.object({ name: z .string() .min(2, { message: "O nome deve ter pelo menos 2 caracteres." }) .max(50, { message: "O nome deve ter no máximo 50 caracteres.", }), framework: z.enum(["next", "sveltekit", "astro", "nuxt", "remix"], { message: "Selecione um framework válido.", }), }); "use server"; import { actionClient } from "@/lib/safe-action"; import { setTimeout } from "node:timers/promises"; import { projectSchema } from "./validation"; export const createProject = actionClient .schema(projectSchema) .action(async ({ parsedInput: { name, framework } }) => { await setTimeout(1000); console.log({ name, framework }); return { name, framework }; });
September 1, 2024 at 8:49 PM
luis.yorpex.app
1️⃣ Primeiro passo: Instalar os pacotes necessários para next-safe-action no seu projeto #NextJS.
2️⃣ Depois, adicione o código abaixo no arquivo `src/lib/safe-action.ts` para configurar o múdulo:
bun add next-safe-action zod import { createSafeActionClient } from "next-safe-action"; export const actionClient = createSafeActionClient();
September 1, 2024 at 8:46 PM
luis.yorpex.app
🚀 Validação de dados em formulários modernos e elegantes com #NextJS.
✨ Usando:
🔹 @shadcn.com
🔹 Server-actions
🔹 Zod
🔹 Next-safe-action
🧵 Confira a Thread! 👇
Formulário com validação de dados.
September 1, 2024 at 8:37 PM