sakilanwar12/nextjs-typescript-skills

Performances Next.js

Règles

1. Images : toujours utiliser next/image avec des sizes explicites, priority uniquement pour l'image héro LCP. Polices : next/font (pas de balise <link> Google bloquant le rendu).
2. Mesurer d'abord : @next/bundle-analyzer, la sortie de next build, Lighthouse. Corriger le plus gros goulot d'étranglement en premier.
3. dynamic(() => import(...), { ssr: false }) pour les widgets lourds côté client uniquement (graphiques, éditeurs). Garder le JS initial sous 200 Ko gz si possible.
4. Mettre en cache agressivement : pages statiques + revalidate (ISR) pour les pages semi-dynamiques ; loading.tsx/Suspense pour diffuser les parties lentes sans bloquer le TTFB.
5. Éviter les cascades : paralléliser dans RSC, mémoïser les appels fetch répétés (déduplication automatique par requête), utiliser unstable_cache pour les calculs coûteux.

Modèles

// next/image — dimensionné, lazy par défaut
import Image from 'next/image';
<Image src="/hero.jpg" alt="Tableau de bord" width={1200} height={630} priority sizes="100vw" />
<Image src="/avatar.png" alt="Utilisateur" width={64} height={64} sizes="64px" />

// next/font — auto-hébergé, zéro 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="fr" className={inter.className}><body>{children}</body></html>;
}

// Widget client lourd — séparation de code
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('@/components/chart'), { ssr: false, loading: () => <p>Chargement du graphique…</p> });

// ISR
export const revalidate = 60;

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

Liste de vérification

• Image héro avec priority + sizes, autres en lazy ?
• next/font utilisée, aucun lien externe de police ?
• Composants lourds importés dynamiquement ?
• Bundle analysé, import le plus lourd justifié ?
• ISR/revalidate défini pour les pages en cache ?
• LCP/CLS/INP vérifiés dans Lighthouse ?