Construir uma loja virtual completa é um dos projetos mais desafiadores e recompensadores no desenvolvimento web. Envolve catálogo de produtos, carrinho, checkout, pagamento, gestão de pedidos e muito mais. Com Next.js 16 e agentes de IA, você pode criar um e-commerce funcional e profissional em dias, não semanas. Neste tutorial, você vai aprender a criar um e-commerce com Next.js 16 usando Claude Code e Codex de forma orquestrada.
O que vamos construir
Vamos desenvolver uma loja virtual completa de roupas e acessórios:
- Catálogo com grid de produtos, busca e filtros
- Página de produto com variações (tamanho, cor)
- Carrinho com cupons de desconto
- Checkout com Stripe
- Painel admin para gestão de produtos e pedidos
- Autenticação e perfis de cliente
Imagem sugerida: Captura de tela da loja final mostrando grid de produtos com filtros, carrinho e página de produto.
Setup com Claude Code
Antes de começar, lembre-se de consultar as docs do Next.js 16 em node_modules/next/dist/docs/. Claude Code configura o projeto com todas as dependências do e-commerce.
Inicialização
claude "Crie um projeto Next.js 16 com TypeScript, App Router, Tailwind CSS. Configure Prisma com PostgreSQL. Instale: prisma, @prisma/client, next-auth (autenticação), stripe (pagamento), @stripe/stripe-js, zod, bcryptjs, lucide-react, recharts (admin analytics), react-hook-form, @hookform/resolvers, jszip. Estrutura: src/app/(store) para páginas públicas, src/app/(auth) para login/registro, src/app/admin para painel, src/components/store, src/components/admin, src/lib/store, src/lib/admin, prisma/schema.prisma."
Catálogo de produtos
Claude Code cria as páginas Server Component do catálogo com geração estática.
Página inicial da loja
claude "Crie src/app/(store)/page.tsx (Server Component) com: 1. Hero section com banner promocional 2. Grid de produtos em destaque (featured: true) 3. Categorias em cards 4. Produtos mais vendidos 5. Newsletter signup Tudo com generateStaticParams para SSG e ISR de 60 segundos."
Página de listagem
claude "Crie src/app/(store)/products/page.tsx com: 1. Grid de produtos com paginação infinita (Server Component + useInfiniteQuery no client) 2. Filtros: categoria, faixa de preço, tamanho, cor, rating mínimo 3. Ordenação: mais recentes, menor preço, maior preço, mais vendidos 4. Busca por nome e descrição 5. Sidebar com filtros (desktop) e drawer (mobile) 6. Breadcrumb automático Use searchParams para estado dos filtros (URL compartilhável)."
Página de produto
claude "Crie src/app/(store)/products/[slug]/page.tsx com: 1. Galeria de imagens com zoom (lightbox) 2. Variações: tamanho (P/M/G/GG) e cor (swatches) 3. Preço com desconto (compareAtPrice riscado) 4. Seletor de quantidade 5. Botão de adicionar ao carrinho (Server Action) 6. Avaliações com estrelas e comentários 7. Produtos relacionados 8. JSON-LD para Product schema generateStaticParams para gerar páginas estáticas."
Carrinho e checkout
Codex gera a lógica do carrinho e Claude Code implementa o checkout.
Carrinho com Server Actions
codex "Crie src/app/(store)/cart/page.tsx e src/lib/store/cart-actions.ts: Server Actions: - addToCart(productId, variantId, quantity): adiciona ao carrinho (cookies ou banco) - updateCartItem(itemId, quantity): atualiza quantidade - removeFromCart(itemId): remove item - applyCoupon(code): valida e aplica cupom de desconto - removeCoupon(): remove cupom Página do carrinho: - Lista de itens com imagem, nome, variação, quantidade, preço - Resumo com subtotal, desconto, frete, total - Campo de cupom com validação - Botão 'Ir para Checkout' - Carrinho vazio com sugestões de produtos"
Checkout
claude "Crie src/app/(store)/checkout/page.tsx com: 1. Etapas: Informações de entrega -> Método de envio -> Pagamento -> Confirmação 2. Formulário de endereço com busca de CEP (ViaCEP API) 3. Cálculo de frete baseado no CEP (via API dos correios ou tabela fixa) 4. Opções de pagamento: Cartão de Crédito (Stripe Elements), Boleto, Pix 5. Resumo do pedido lateral 6. Processamento: via Server Action que cria pedido no banco e inicia pagamento no Stripe 7. Página de confirmação com ID do pedido"
Integração de pagamento com Stripe
Claude Code gera toda a integração com Stripe Checkout.
claude "Configure pagamento com Stripe: 1. src/lib/stripe/client.ts: Stripe Elements configurado com Appearance 2. src/lib/stripe/server.ts: funções createCheckoutSession, createPaymentIntent, handleWebhook 3. API route POST /api/stripe/webhook: processa eventos (checkout.session.completed, payment_intent.succeeded, payment_intent.payment_failed) 4. Ao receber checkout.session.completed: atualiza pedido para PAID, libera estoque, envia email 5. Tratar falhas: cartão recusado, saldo insuficiente, 3D Secure 6. Test mode com cartões de teste do Stripe"
Admin e gestão
Codex gera o painel administrativo do e-commerce.
opencode "Crie as páginas do admin em src/app/admin/: Dashboard (/admin): cards com receita hoje/mês/ano, pedidos recentes, gráfico de vendas (recharts), produtos mais vendidos Produtos (/admin/products): tabela com CRUD (imagem, nome, SKU, preço, estoque, status), formulário com todas as variações, upload de imagens com preview Pedidos (/admin/orders): tabela com status, filtros, detalhes, atualização de status (PENDING -> CONFIRMED -> SHIPPED -> DELIVERED -> CANCELLED) Cupons (/admin/coupons): CRUD de cupons com código, tipo (percentual/valor fixo), valor, mínimo, validade, limite de uso Clientes (/admin/customers): tabela com total gasto, pedidos, data do último pedido Use Server Components para listas e Client Components para formulários. @tanstack/react-table para tabelas."
SEO e performance
Claude Code configura SEO completo para o e-commerce.
claude "Configure SEO do e-commerce: 1. generateMetadata dinâmico para cada página 2. JSON-LD para Organization, Product, BreadcrumbList, Review 3. Sitemap dinâmico com produtos, categorias e páginas estáticas 4. Robots.txt com regras para admin 5. Open Graph e Twitter Cards com imagens dos produtos 6. Performance: ISR para páginas de produto, streaming para listas, image optimization com next/image, font optimization com next/font, bundle analysis com @next/bundle-analyzer"
FAQ — Perguntas Frequentes
Preciso saber Next.js 16 para criar um e-commerce com agentes de IA?
Sim. Next.js 16 traz mudanças no App Router. Consulte a documentação oficial em node_modules/next/dist/docs/ antes de começar.
Claude Code ou Codex para e-commerce completo?
Claude Code é melhor para estrutura, Server Components, carrinho e pagamento. Codex é mais rápido para schemas Prisma, componentes de UI e testes.
Os agentes geram integração com pagamento (Stripe)?
Sim. Claude Code gera integração completa com Stripe Checkout, webhooks e tratamento de falhas.
Posso usar Server Actions com agentes no e-commerce?
Sim. Claude Code gera Server Actions para mutations de carrinho, checkout e gestão de pedidos.
Dá para orquestrar Claude Code e Codex no mesmo e-commerce?
Sim. Com o Orquestra, Claude Code cria páginas e lógica de negócio, Codex gera componentes de UI e testes. Tudo em paralelo.
Crie seu e-commerce com agentes hoje
Neste tutorial, você aprendeu a criar um e-commerce com Next.js 16 usando Claude Code e Codex. Do catálogo ao checkout com Stripe, cada etapa foi acelerada pelos agentes.
O Orquestra conecta Claude Code, Codex e outros agentes no mesmo canvas infinito no Windows 11, permitindo que você desenvolva seu e-commerce com múltiplos agentes trabalhando em paralelo. Baixe o Orquestra e comece seu teste grátis de 7 dias.
Links internos recomendados
- APIs REST com Agentes de IA — crie a API do seu e-commerce
- TypeScript React com Agentes de IA — tutorial complementar de componentes
- Testes Automatizados com Agentes de IA — aprenda a testar seu e-commerce
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.