sakilanwar12/nextjs-typescript-skills

Desempenho no Next.js

Regras

1. Imagens: sempre next/image com sizes explícitos, priority apenas para herói LCP. Fontes: next/font (sem <link> do Google bloqueante de renderização).
2. Meça primeiro: @next/bundle-analyzer, saída do next build, Lighthouse. Corrija o maior gargalo primeiro.
3. dynamic(() => import(...), { ssr: false }) para widgets pesados apenas no cliente (gráficos, editores). Mantenha o JS inicial < 200KB gz sempre que possível.
4. Faça cache agressivo: estático + revalidate (ISR) para páginas semidinâmicas; use loading.tsx/Suspense para transmitir partes lentas em vez de bloquear o TTFB.
5. Evite cascatas: paralelize em RSC, memorize fetch repetitivo (auto-deduplicado por requisição), use unstable_cache para operações computacionais caras.

Padrões

// next/image — dimensionado, lazy por padrão
import Image from 'next/image';
<Image src="/hero.jpg" alt="Dashboard" width={1200} height={630} priority sizes="100vw" />
<Image src="/avatar.png" alt="Usuário" width={64} height={64} sizes="64px" />

// next/font — auto-hospedado, zero de CLS
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="en" className={inter.className}><body>{children}</body></html>;
}

// Widget pesado no cliente — divisão de código
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('@/components/chart'), { ssr: false, loading: () => <p>Carregando gráfico…</p> });

// ISR
export const revalidate = 60;

// next.config.js — analisador
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' });
module.exports = withBundleAnalyzer({});
// ANALYZE=true next build

Lista de Verificação

• Imagem herói com priority + sizes, as outras lazy?
• next/font usado, sem links externos de fontes?
• Componentes pesados importados dinamicamente?
• Bundle analisado, maior importação justificada?
• ISR/revalidate definido para páginas com cache?
• LCP/CLS/INP verificados no Lighthouse?