Destino Dev

Cursos

Otimização de Performance Next.js: De 4s para menos de 500ms

Código do curso: github.com/johnpires/otimizacao-performance-nextjs

Aprenda a identificar e corrigir gargalos de performance em aplicações Next.js. Neste projeto prático, você vai transformar uma aplicação lenta (4s de carregamento) em uma aplicação ultrarrápida (menos de 500ms), usando técnicas reais como lazy loading, code splitting, cache estratégico, otimização de imagens, bundle analysis e muito mais.

Conteúdo do curso

Módulo 1: Introdução e Setup

Visão geral do projeto e configuração do ambiente de desenvolvimento para otimização de performance no Next.js.

  1. O que vamos construir: de 4s para menos de 500ms (2 min)
  2. Configurando o ambiente de desenvolvimento (8 min)
  3. Estrutura do projeto e onde estão os problemas (3 min)

Módulo 2: Diagnóstico e Métricas de Performance

Aprenda a medir e diagnosticar problemas de performance usando Web Vitals, Lighthouse, DevTools e Bundle Analyzer.

  1. Web Vitals: LCP, INP, CLS e TTFB na prática (2 min)
  2. Lighthouse e Chrome DevTools: diagnóstico profundo (3 min)
  3. Bundle Analyzer: visualizando o problema (3 min)
  4. Profiling de componentes React com DevTools (3 min)

Módulo 3: Code Splitting e Bundle Optimization

Reduza o tamanho do bundle com dynamic imports, tree shaking, lazy loading e eliminação de dependências pesadas.

  1. Dynamic imports e lazy loading na prática (3 min)
  2. Tree shaking e eliminação de código morto (3 min)
  3. Substituindo dependências pesadas por alternativas leves (3 min)
  4. Otimizando fontes e scripts de terceiros (3 min)

Módulo 4: Otimização de Imagens e Assets

Otimize imagens com next/image, formatos modernos WebP/AVIF e estratégias avançadas de carregamento.

  1. next/image: configuração avançada e prioridade (2 min)
  2. WebP, AVIF e otimização avançada de imagens (3 min)
  3. Virtualização de listas e carregamento progressivo (3 min)

Módulo 5: Cache Estratégico e ISR

Implemente caching eficiente com ISR, SWR, React Query e cache de API routes no Next.js.

  1. Cache no Next.js 14: fetch, revalidate e cache tags (3 min)
  2. ISR: Incremental Static Regeneration na prática (4 min)
  3. SWR e React Query: cache inteligente no cliente (3 min)
  4. Cache de API Routes e Middleware de performance (3 min)

Módulo 6: React Server Components e Streaming

Utilize React Server Components, Streaming e Suspense para uma renderização eficiente e progressiva.

  1. React Server Components: server vs client na prática (3 min)
  2. Streaming com Suspense e loading.tsx (3 min)
  3. Otimizações avançadas: prefetch, preload e Server Actions (3 min)

Módulo 7: Deploy, CDN e Monitoramento

Faça deploy otimizado na Vercel, configure CDN, Edge Network e implemente monitoramento em produção.

  1. Deploy otimizado na Vercel com Edge Network (3 min)
  2. Monitoramento em produção: RUM, alertas e regressões (3 min)
  3. Resultado final e próximos passos (4 min)