Production

Core Idea

Checklist de otimizações e boas práticas a considerar antes de levar uma aplicação Next.js para produção: o que já vem automático e o que revisar antes do deploy.

Key Concepts

• Code-splitting automático: Next.js divide o código por página; só carrega o necessário para a rota atual.
• Prefetching: <Link> pré-busca a rota ao entrar no viewport, tornando a navegação quase instantânea.
• Automatic Static Optimization: páginas sem dependência de dados bloqueante são prerenderizadas e servidas via CDN.
• <Link>: usar para navegação client-side em vez de <a> puro.
• Custom Errors: páginas customizadas de erro 500 e 404.
• API Routes: acessar recursos de backend sem expor segredos ao cliente.
• ISR: atualizar páginas estáticas após o build sem rebuild completo.
• Font Module / <Image> / <Script>: componentes que otimizam fontes, imagens e scripts de terceiros automaticamente.
• NEXT_PUBLIC_ prefix: única forma de expor uma env var ao browser; demais ficam só no servidor.
• Content Security Policy: mitigação contra XSS, clickjacking e injeção de código.
• @next/bundle-analyzer: plugin para analisar tamanho dos bundles JS.

Anti-patterns

• Não versionar .env.* no .gitignore: risco de vazar segredos; só variáveis NEXT_PUBLIC_ devem ir ao cliente.
• Pular next build + next start local antes do deploy: perde a chance de capturar erros de build e medir performance em ambiente production-like.

Key Takeaways

1. Boa parte da performance (code-splitting, prefetch, static optimization) já vem de graça, sem configuração.
2. Rodar next build localmente antes de produção captura erros cedo.
3. Rodar Lighthouse em modo incógnito complementa dados de campo (Core Web Vitals reais).
4. Analisar bundles com @next/bundle-analyzer ajuda a identificar dependências pesadas.

Connects To

• Static Exports: alternativa de deploy sem servidor Node.
• Self-Hosting: aprofunda cache, env vars e multi-instância em produção.