Site Estático Next.js
Quando usar
Use para landing page, site institucional, página de campanha, portfólio ou blog. O resultado é somente front-end, exportado como HTML/CSS/JS e publicado no Cloudflare Pages.
Não use quando houver login, cadastro, banco de dados, painel administrativo, cobrança, upload ou API própria. Nesses casos use a skill sistema-fullstack.
Criar um projeto
- Confirme nome, domínio final, objetivo da página e se existe formulário de contato.
- Use o repositório de site estático:
git clone https://github.com/guibean/nextjs-template.git <slug>
cd <slug>
git remote remove origin
git remote add origin https://github.com/guibean/<slug>.git
- Crie
.env.locala partir de.env.examplee preenchaNEXT_PUBLIC_SITE_URL, nome, autor e e-mail. - Rode
pnpm install,pnpm lint,pnpm typecheckepnpm build. - Só então altere o conteúdo.
Regras
- Não adicione dependências de back-end.
- Instale componentes shadcn sob demanda:
pnpm exec shadcn add dialog
pnpm exec shadcn add @aceternity/spotlight
- Para blocos Aceternity, verifique a licença e instale
motionapenas se o componente exigir. - Mantenha um único
h1por página e a hierarquia de headings. - Toda página nova precisa de
createMetadata, entrada no sitemap e link navegável. - Use
next/imagecomsizese imagens processadas porpnpm images. - Não use
output: "server", Server Actions ou API Routes do Next neste perfil. - Formulário: preserve Turnstile +
functions/api/contact.ts+ Resend.
Checklist antes de entregar
Leia references/seo-checklist.md e confirme:
- metadata, canonical, Open Graph e robots
- sitemap inclui todas as páginas públicas
llms.txtatualizado- imagens em
assets/images/epublic/images/geradas - um
h1, contraste, foco visível e navegação por teclado - links externos com
relapropriado pnpm lint,pnpm typecheck,pnpm buildpassando- Lighthouse ≥ 95 nas quatro categorias
- privacidade atualizada se houver formulário/analytics
Deploy Cloudflare Pages
- Build command:
pnpm build - Output directory:
out - Node: 24
- Variáveis públicas no build e secrets nas Functions
- Configure o domínio em
NEXT_PUBLIC_SITE_URL,TURNSTILE_HOSTNAMEeCONTACT_ALLOWED_ORIGIN