Guia rápidodev friendly

How-to-Use: usando e personalizando seu Template Oficial

Dicas e orientações executáveis. Direto ao Ponto. Passo a passo para você clonar, entender, customizar e lançar o template sem fricção.

1. Bem-vindo ao Template Oficial

  • Você recebeu o Template Oficial para acelerar o lançamento do seu produto. Ele foi pensado para cobrir ponta a ponta: identidade visual, front-end, integrações de pagamentos e trilhas para back-end/DB.
  • A proposta: você foca no que é único do seu negócio; o template entrega o alicerce, o boilerplate e a ergonomia de dev-amigo.

2. Pré-requisitos e instalação

  • Node 18+ (ou a mesma versão da sua plataforma de deploy). Verifique com `node -v`.
  • Clone seu repositório (derivado do Template Oficial) e rode `npm install`.
  • Copie `.env.example` para `.env.local` e preencha: URLs básicas (SITE_URL), CTAs (LOGIN/SIGNUP/CHECKOUT/DEMO) e provedores de pagamento (Stripe/Abacate Pay/Hotmart).
  • `npm run dev` para desenvolvimento. Acesse http://localhost:3000 (landing) e /checkout (checkout interno).

3. Identidade e branding (rápido e sem atrito)

  • Textos e blocos: edite `src/app/components/SalesPage.tsx` (hero, métricas, problema/solução, recursos, pricing, FAQ).
  • Cores e temas: ajuste utilitários Tailwind nas classes (`from-*/to-*`) ou mapeie paleta em `tailwind.config.ts` (primary/secondary).
  • Logo e favicon: substitua `public/favicon.svg` pelo seu. Se quiser `.ico`/`.png`, adicione e aponte em `metadata.icons` (layout.tsx).
  • Screenshots do seu produto: adicione imagens em `public/previews`. O carrossel já as exibe (home, features, pricing, checkout, docs).

4. Pagamentos e planos (Stripe / Abacate Pay / Hotmart)

  • Checkout fixo em `/checkout`: usuário escolhe entre Template (R$ 780) ou Customização + Template (R$ 2.997), com doação opcional.
  • Configure Stripe Secret Key em `STRIPE_SECRET_KEY` para integração completa (servidor).
  • Para outros provedores, configure `NEXT_PUBLIC_ABACATEPAY_LINK` e `NEXT_PUBLIC_HOTMART_LINK` como links diretos.
  • Página de sucesso: `/checkout/success` exibe detalhes da compra via Stripe e agradece doações.
  • Preços fixos definidos em `src/app/checkout/page.tsx` (TEMPLATE_PRICE e CUSTOM_PRICE).

5. Autenticação e e-mail (trilhas prontas)

  • Auth via NextAuth: configure provedores OAuth (Google/GitHub) criando credenciais e preenchendo envs. Ajuste callbacks/URLs na plataforma.
  • E-mail transacional/marketing: integre serviços como Resend/Sendgrid. Centralize chaves no `.env` e encapsule chamadas em rotas `app/api/...`.
  • Formulários (contato/newsletter): o template já possui um exemplo usando endpoint (`/api/contact`) com Formspree; troque pelo seu provedor quando desejar.

6. Banco de dados e ORM (ex.: Postgres + Drizzle/Prisma)

  • Escolha um Postgres gerenciado (Neon/Supabase/RDS). Defina `DATABASE_URL` e `DIRECT_URL` no `.env`.
  • Defina seu ORM preferido: Drizzle (migrations SQL tipadas) ou Prisma (schema declarativo). Padronize scripts de `migrate` e `generate` no package.json.
  • Migrations: mantenha o versionamento (prática obrigatória). Rodar migrations no CI/CD antes do deploy garante consistência.
  • Seeds: crie um script de seed para dados iniciais (planos, roles, configs).

7. APIs e back-end (App Router)

  • Rotas de API em `src/app/api/<rota>/route.ts` (exporte `GET/POST/PUT/DELETE`). Centralize validações, schema (Zod/Yup) e erros consistentes.
  • Secrets e chaves nunca no client: injete via `.env` e leia no server (Route Handlers / Server Actions).
  • Webhooks (Stripe/Hotmart/Qualquer): crie rotas dedicadas (`/api/webhooks/...`), valide assinatura, faça idempotência e persista eventos.

8. Deploy e ambientes (Dev / Preview / Prod)

  • Vercel: conecte o repositório, configure variáveis (Production + Preview) e faça o primeiro deploy.
  • Domínios e canonical: vincule domínio, ajuste `NEXT_PUBLIC_SITE_URL` e valide `robots.txt`/`sitemap.xml`.
  • Observabilidade: ative Analytics/Speed Insights. Para logs e tracing, integre uma plataforma (ex.: Axiom/Logflare/Sentry) conforme a necessidade.

9. Customizações avançadas

  • Componentização: extraia seções da landing para `src/app/components` e mantenha o conteúdo parametrizável.
  • SEO: `layout.tsx` define OpenGraph/Twitter. Adicione imagens OG reais e refine títulos/descrições por rota (generateMetadata).
  • Performance: use imagens otimizadas (`next/image`), reduza JS crítico e prefira Server Components quando possível.

10. Checklist final de entrega

  • Branding fechado: logo, cores, favicon, textos conferidos.
  • CTAs funcionais: cadastro/login/checkout OK. Política Early-Adopter revisada.
  • Pagamentos testados: link/params corretos e (se aplicável) webhooks validados.
  • DB e API: migrations aplicadas, seeds rodados, variáveis de ambiente corretas.
  • Deploy: domínio, canonical, SEO básico, analytics. Smoke test de /, /checkout, /docs.