Pular para o conteúdo
MeWeb

Desenvolvedores

Tema starter

Um storefront Next.js completo, open-source e propositalmente enxuto: vitrine, PDP, carrinho e checkout funcionais contra a Storefront API, sem nenhuma dependência da plataforma. Copie, rode com a sua loja e transforme no seu design.

O que vem dentro

storefront-starter/
├── src/app/
│   ├── api/[...path]/route.ts   # proxy BFF → API da loja (cookies + X-Forwarded-Host)
│   ├── page.tsx                 # home (coleções em destaque)
│   ├── colecoes/[slug]/         # listagem da coleção
│   ├── produtos/[slug]/         # PDP com variantes e estoque
│   ├── carrinho/                # itens, quantidades, cupom
│   ├── checkout/                # identificação → entrega → pagamento
│   └── confirmacao/             # obrigado + status do pagamento
└── src/lib/                     # clientes de API, tipos e formatação de preço
  • Proxy BFF pronto: cookies de carrinho/sessão funcionam same-origin no seu domínio (ver autenticação).
  • Zero dependências privadas: só Next.js e React; os tipos da API estão no próprio starter, espelhando a referência.
  • CSS puro e mínimo, fácil de trocar pelo seu stack (Tailwind, styled…).

Rodando local

terminal
# dentro da pasta do starter
cp .env.example .env.local   # configure MEWEB_STORE_HOST
npm install
npm run dev                  # http://localhost:3005

MEWEB_STORE_HOST é o host da sua loja (ex.: minha-loja.meweb.com.br); todo o resto é resolvido a partir dele.

Publicando no domínio da loja

terminal
npm run build
npm run start   # ou faça deploy em Vercel/Render/na sua VPS
  1. Faça o deploy do starter na sua hospedagem.
  2. Mantenha o domínio próprio cadastrado na loja (painel da plataforma): é o cadastro que libera o CORS para chamadas de browser.
  3. Aponte o DNS do domínio para a sua hospedagem. A partir daí o domínio serve o SEU front, e a API continua respondendo pelo subdomínio da loja.

Onde encontrar

O starter é distribuído na pasta examples/storefront-starter do repositório da plataforma. Peça o acesso à nossa equipe ou copie a pasta a partir de uma instalação existente; ela é autossuficiente (roda com npm install fora do repositório).