CRUD (Create, Read, Update, Delete) é a base de praticamente toda aplicação web. Com Next.js 14, Prisma ORM e agentes de IA, você pode construir um sistema CRUD completo, seguro e performático em horas. Neste tutorial, você vai aprender a criar um CRUD completo com Next.js e Prisma usando Claude Code e Codex de forma orquestrada.
O que vamos construir
Vamos desenvolver um sistema de gerenciamento de produtos com Next.js 14 App Router:
- Listagem de produtos com paginação e busca
- Formulário de criação com validação
- Página de detalhes com edição inline
- Exclusão com confirmação e soft delete
- Upload de imagens com preview
- Filtros por categoria, preço e status
Imagem sugerida: Captura de tela do CRUD final mostrando listagem de produtos com tabela, formulário de edição e filtros.
Setup e schema com Codex
Vamos usar Claude Code para configurar o Next.js e Codex para gerar o schema Prisma.
Inicialização do Next.js
claude "Crie um projeto Next.js 14 com TypeScript, App Router, Tailwind CSS e ESLint. Configure Prisma com PostgreSQL. Instale: prisma, @prisma/client, zod, bcryptjs, jszip, multer (upload). Estrutura: src/app/api/products (rotas API REST), src/app/products (páginas CRUD), src/components/products (ProductForm, ProductTable, ProductCard), src/lib/prisma.ts (singleton), src/lib/validations.ts, src/types."
Schema Prisma com Codex
Peça ao Codex para gerar o schema completo:
opencode "Gere o schema Prisma para PostgreSQL de um sistema de produtos com: Model Category: - id: String UUID - name: String unique - slug: String unique - description: String? - createdAt: DateTime - updatedAt: DateTime - products: relation Product[] Model Product: - id: String UUID - name: String - slug: String unique - description: String? - price: Decimal (9,2) - comparePrice: Decimal?(9,2) - sku: String unique - stock: Int default 0 - images: String[] (URLs) - status: enum (DRAFT, ACTIVE, ARCHIVED) - featured: Boolean default false - categoryId: String FK Category - category: relation Category - tags: String[] - metadata: Json? - createdAt: DateTime - updatedAt: DateTime - deletedAt: DateTime? (soft delete) Inclua índices para slug, sku, status, categoryId e deletedAt. Use map para snake_case."
Rotas API com Claude Code
Claude Code cria as rotas API do Next.js com tratamento completo de erros.
API routes REST
claude "Crie as rotas API REST em src/app/api/products: GET /api/products - lista produtos com paginação (page, limit), busca (q), filtros (categoryId, status, minPrice, maxPrice) e ordenação (sortBy, sortOrder) GET /api/products/[id] - retorna produto por ID POST /api/products - cria produto com validação Zod PUT /api/products/[id] - atualiza produto parcialmente DELETE /api/products/[id] - soft delete (marca deletedAt) Use NextResponse para respostas padronizadas. Trate erros: 400 (validação), 404 (não encontrado), 409 (conflito sku duplicado), 500 (erro interno). Use o singleton do Prisma de src/lib/prisma.ts."
Categoria routes
claude "Crie em src/app/api/categories: GET /api/categories - lista todas as categorias POST /api/categories - cria categoria PUT /api/categories/[id] - atualiza categoria DELETE /api/categories/[id] - deleta se não tiver produtos associados"
Server Actions e formulários
Server Actions são a forma moderna de lidar com formulários no Next.js App Router. Claude Code gera o código completo.
Server Actions
claude "Crie src/app/products/actions.ts com Server Actions:
1. createProduct(formData): valida com Zod, cria no banco, revalida path /products, retorna { success, product? }
2. updateProduct(id, formData): valida, atualiza no banco, revalida, retorna { success, product? }
3. deleteProduct(id): soft delete, revalida, retorna { success }
4. uploadImage(file): salva em /public/products, retorna URL
Use 'use server' no topo do arquivo. Use revalidatePath('/products') após cada operação."
Formulário de produto
claude "Crie src/components/products/ProductForm.tsx: 1. Modo criação e edição (recebe product? como prop) 2. Campos: nome, descrição (textarea), preço, preço comparativo, SKU, estoque, categoria (select), status (select), featured (checkbox), tags (input com enter para adicionar) 3. Upload de imagens com drag-and-drop e preview 4. Validação client-side com Zod + react-hook-form 5. Submit via Server Action com loading state e feedback 6. Botão de cancelar que volta para listagem"
Listagem de produtos
claude "Crie src/app/products/page.tsx (Server Component) que: 1. Busca produtos do Prisma com paginação (10 por página) 2. Aceita searchParams para página, busca, filtros e ordenação 3. Renderiza ProductTable com colunas: imagem, nome, SKU, categoria, preço, estoque, status, ações 4. Inclui SearchBar, filtros por categoria e status, paginação 5. Botão 'Novo Produto' que navega para /products/new 6. Loading state com Suspense e skeleton"
Paginação e filtros
Codex gera a lógica de paginação e filtros do lado do servidor.
opencode "Crie src/lib/product-queries.ts com funções otimizadas: 1. getProducts(filters): query Prisma com where dinâmico, paginação (skip/take), ordenação, include de categoria 2. getProductById(id): busca por ID incluindo categoria 3. getProductBySlug(slug): busca por slug (para SEO) 4. getCategories(): lista categorias ativas 5. getProductStats(): total, ativos, inativos, estoque baixo 6. searchProducts(query, limit): busca full-text por nome, SKU e descrição Use Prisma transactions onde necessário. Retorne Promise.all para queries independentes."
Testes e validação
Para finalizar, vamos gerar testes e schemas de validação.
Validação Zod
opencode "Crie src/lib/validations.ts com schemas Zod:
- createProductSchema: name (string 3-200), description (opcional), price (positive decimal), sku (regex), stock (int {'>'}= 0), categoryId (uuid), status (enum), tags (array max 10)
- updateProductSchema: todos opcionais com partial
- productFilterSchema: page (int {'>'}= 1), limit (int 1-100), q (string opcional), categoryId (uuid opcional), status (enum opcional), minPrice, maxPrice (decimais opcionais)
Exporte os tipos inferidos: type CreateProductInput, type UpdateProductInput"
Testes de API
opencode "Crie tests/api/products.test.ts: 1. GET /api/products: deve retornar lista paginada, deve filtrar por categoria, deve buscar por nome 2. POST /api/products: deve criar produto com dados válidos (201), deve rejeitar dados inválidos (400), deve rejeitar SKU duplicado (409) 3. PUT /api/products/[id]: deve atualizar nome (200), deve retornar 404 para ID inexistente 4. DELETE /api/products/[id]: deve marcar deletedAt (200), GET após delete deve retornar 404"
FAQ — Perguntas Frequentes
Preciso saber Next.js e Prisma para usar agentes no CRUD?
Sim, conhecimento básico é necessário. Os agentes geram o código, mas você precisa entender server components, server actions e Prisma Client para revisar e integrar.
Claude Code ou Codex para criar CRUD com Next.js?
Claude Code é melhor para rotas API, server actions e server components. Codex é mais rápido para schemas Prisma, validações Zod e testes.
Posso usar Server Actions com agentes de IA?
Sim. Claude Code conhece Server Actions do Next.js 14+ e gera código com 'use server', validação e revalidação de cache.
Os agentes geram codigo seguro?
Sim. Prisma ORM previne SQL injection por design. React escapa valores para XSS. Os agentes também geram validação com Zod.
Dá para orquestrar Claude Code e Codex no mesmo projeto CRUD?
Sim. Com o Orquestra, Claude Code cria rotas e páginas enquanto Codex gera schema e testes. Tudo em paralelo.
Construa seu CRUD com agentes hoje
Neste tutorial, você aprendeu a criar um CRUD completo com Next.js e Prisma usando Claude Code e Codex. Das rotas API aos formulários com Server Actions, cada etapa foi acelerada pelos agentes.
Quer levar essa orquestração para o próximo nível? O Orquestra conecta Claude Code, Codex e outros agentes no mesmo canvas infinito no Windows 11. Baixe o Orquestra e comece seu teste grátis de 7 dias.
Links internos recomendados
- APIs REST com Agentes de IA — tutorial complementar sobre APIs REST
- TypeScript React com Agentes de IA — aprofunde-se em componentes React
- Testes Automatizados com Agentes de IA — aprenda a testar CRUDs
Pronto para orquestrar seus agentes?
Baixe o Orquestra para Windows 11 e comece a coordenar seus agentes de IA em um canvas infinito. Grátis por 7 dias.