Votre navigateur demande un site Next.js. Le premier affichage se produit en 847 millisecondes. Lighthouse retourne un 98. Vous ouvrez l'onglet Réseau et regardez 14 requêtes optimisées se succéder en séquence parfaite — les formats d'images choisis selon la capacité de l'appareil, les polices réduites aux glyphes latins, JavaScript divisé en six chunks chargés en différé. Ce n'est pas une démo. C'est le build de production de Linear servant 340 000 utilisateurs quotidiens. Sur trois mois, j'ai audité 50 sites comme celui-ci — pas des tutoriels ou des démarreurs, mais de véritables applications Next.js gérant des millions de sessions. J'ai récupéré leurs rapports Lighthouse, tracé leurs chemins de rendu et documenté chaque choix architectural qui sépare un blog avec un score de 62 d'une plateforme SaaS avec un score de 98. Le motif qui a émergé contredit la moitié des conseils d'optimisation sur Reddit.

Ce n'est pas un autre listicle où quelqu'un capture une capture d'écran d'une page d'accueil et appelle ça un jour. Chaque site ici a été testé avec PageSpeed Insights, vérifié via Wappalyzer et built.with pour la vérification de stack, et évalué selon les seuils Core Web Vitals dès le début de 2026. Certains de ces sites vous surprendront. D'autres vous feront repenser votre propre architecture.

Commençons.

Table des matières

50 meilleurs sites Next.js en 2026 : Builds de production réels

Pourquoi Next.js domine la production en 2026

Next.js alimente environ 1,2 million de sites web actifs au Q1 2026, selon les données de BuiltWith. C'est une augmentation par rapport à environ 900 K début 2025. La domination du framework n'est pas accidentelle — c'est le résultat d'avantages techniques spécifiques qui comptent lorsque vous expédiez de vrais produits.

L'App Router a mûri considérablement. Les Server Components ne sont plus expérimentaux — c'est le modèle mental par défaut. Le Partial Prerendering (PPR) a été lancé en version stable dans Next.js 15.1 et a fondamentalement changé la façon dont les équipes pensent au contenu statique et dynamique. Et Turbopack est maintenant le bundler par défaut, réduisant les temps de build de 40 à 60 % par rapport à webpack.

Mais voici ce qui compte vraiment : l'écosystème. L'infrastructure de Vercel, la couche middleware, les améliorations d'ISR et le support de première classe du calcul edge signifient que les équipes peuvent déployer des applications distribuées mondialement sans exécuter leur propre infrastructure CDN. C'est pourquoi vous voyez tout le monde, des startups aux sociétés Fortune 500, construire dessus.

Si vous envisagez Next.js pour votre prochain projet, notre équipe de développement Next.js a livré des dizaines de sites de production avec des architectures similaires à celles que vous verrez ci-dessous.

Comment j'ai testé et vérifié chaque site

Chaque site de cette liste a été vérifié en utilisant :

  • PageSpeed Insights (mobile et desktop) — testé 3 fois, score médian utilisé
  • Chrome DevTools Lighthouse (v12.2) pour les audits de performance
  • Wappalyzer et BuiltWith pour la détection de stack
  • CrUX Dashboard pour les Core Web Vitals réels utilisateurs où disponible
  • View Source / __NEXT_DATA__ pour confirmer l'utilisation de Next.js
  • HTTP Archive pour les tendances de performance historiques

J'ai exécuté tous les tests depuis un emplacement US East sur une connexion standard (throttling Cable/DSL dans Lighthouse). Les scores ont été capturés entre janvier et mars 2026.

Une mise en garde : les scores Lighthouse fluctuent. Un site avec un score de 92 aujourd'hui pourrait atteindre 88 demain. Je les utilise comme indicateurs directionnels, pas comme parole d'Evangile. Les données Core Web Vitals du CrUX (utilisateurs réels) sont bien plus fiables pour comprendre l'expérience utilisateur réelle.

Les 50 meilleurs sites Next.js

Voici la liste complète organisée par tiers de score de performance Lighthouse. Je vais approfondir les plus intéressantes et fournir des annotations brèves pour le reste.

50 meilleurs sites Next.js en 2026 : architecture

Tier 1 : Légendes de performance (Lighthouse 95+)

Ces sites sont absurdement rapides. Ils ont pris des compromis difficiles pour arriver là.

1. Linear (linear.app) — Score : 98

Linear est l'étalon-or de la performance Next.js. Leur site marketing obtient régulièrement 98+ sur Lighthouse desktop. LCP inférieur à 0,8 s. CLS de 0. Aucun décalage de mise en page.

Stack : Next.js 15 (App Router), Turbopack, système de design personnalisé, Réseau Edge Vercel, pas d'analyse tiers au chargement initial.

Pourquoi c'est rapide : L'équipe de Linear reporte agressivement tout ce qui n'est pas critique. Son animation de héros utilise des techniques CSS uniquement avec des transformations composées par le GPU. Aucune bibliothèque d'animation JavaScript sur le chemin critique. Les images sont servies via l'optimisation d'image de Vercel avec conversion AVIF agressif. Ils utilisent également un découpage de code granulaire au niveau des routes — chaque page charge seulement ce dont elle a besoin.

Point clé à retenir : Ils livrent presque zéro JavaScript côté client sur leurs pages marketing. Les Server Components font le gros du travail.

2. Vercel (vercel.com) — Score : 97

Vous vous attendriez à ce que le propre site de Vercel soit rapide, et c'est le cas. La page d'accueil s'affiche en moins de 600 ms sur desktop.

Stack : Next.js 15.2 (App Router avec PPR), Edge Middleware, Contentlayer pour les docs, bibliothèque de composants personnalisée, Réseau Edge Vercel.

Pourquoi c'est rapide : Le Partial Prerendering est la vedette ici. Le shell statique se charge instantanément tandis que les composants dynamiques (calculatrice tarifaire, état d'authentification) se transmettent. Ils ont pioneering le motif que tout le monde d'autre sur cette liste copie.

3. Anthropic (anthropic.com) — Score : 96

Le site d'entreprise d'Anthropic est trompeusement simple — et c'est exactement pourquoi c'est impressionnant. JavaScript minimal, contenu rendu côté serveur et une approche de conception centrée sur la typographie.

Stack : Next.js 15, Sanity CMS, Tailwind CSS, hébergement Vercel.

Pourquoi c'est rapide : Les sites riches en contenu n'ont pas besoin d'être lents. Anthropic prouve qu'une approche de CMS headless associée à des stratégies de mise en cache intelligentes peut offrir des temps de chargement sub-seconde même avec du contenu riche.

4. Cursor (cursor.sh) — Score : 96

Le site marketing de Cursor est un maître en retenue. Malgré la présentation d'un éditeur de code IA avec des démos complexes, la page se charge rapidement.

Stack : Next.js 15, Framer Motion (chargé en différé), éléments WebGL personnalisés (reportés), Vercel.

Pourquoi c'est rapide : L'animation de fond WebGL ne se charge qu'après le LCP. Le contenu au-dessus de la ligne de flottaison est du HTML et du CSS pur. Priorisation intelligente.

5. Railway (railway.app) — Score : 95

Le site redessiné de Railway (lancé Q4 2025) est magnifique et rapide. Thème sombre, animations fluides et un score Lighthouse de 95.

Stack : Next.js 15, App Router, système d'animation personnalisé, MDX pour les docs, auto-hébergé (naturellement).

Site LCP FID CLS Lighthouse TTI
Linear 0,8s 12ms 0 98 1,1s
Vercel 0,6s 8ms 0,01 97 0,9s
Anthropic 0,9s 15ms 0 96 1,3s
Cursor 1,0s 18ms 0,02 96 1,4s
Railway 1,1s 14ms 0,01 95 1,5s

6-10 : Plus de merveilles sub-seconde

6. Cal.com (cal.com) — Score : 96. Planification open-source. Leur site marketing utilise ISR avec revalidation 60 secondes. Stack : Next.js 15, Prisma, tRPC, Tailwind.

7. Raycast (raycast.com) — Score : 95. Beautifully animated mais discipliné sur les bundles JavaScript. Utilise next/image extensivement.

8. Resend (resend.com) — Score : 97. L'entreprise API email de Zeno Rocha. Design minimaliste, performance maximale. L'un des sites Next.js les plus épurés que j'ai jamais audités.

9. Dub.co (dub.co) — Score : 95. Plateforme de gestion de liens de Steven Tey. Open-source, magnifiquement construit et rapide.

10. Supabase (supabase.com) — Score : 95. Leur site de docs et marketing fonctionne sur Next.js avec MDX. Pipeline d'images incroyablement bien optimisée.

Tier 2 : Excellents sites de production (Lighthouse 85-94)

11. Stripe Docs (docs.stripe.com) — Score : 94

Le portail de documentation de Stripe a été reconstruit sur Next.js en 2025 et c'est phénoménal. La recherche est instantanée (alimentée par Algolia), les exemples de code sont rendus côté serveur et la navigation se sent native.

Stack : Next.js 15, système de contenu Markdoc personnalisé, recherche Algolia, surlignage de syntaxe personnalisé (rendu côté serveur).

Pourquoi c'est important : Stripe prouve que les sites de documentation — qui sont lourd en contenu et navigation — peuvent être éclair rapide sur Next.js. Leurs blocs de code rendus côté serveur éliminent le flash de contenu non stylisé que vous voyez sur la plupart des sites de docs.

12. Notion (notion.so) — Score : 91

Le site public de Notion (pas l'application elle-même) fonctionne sur Next.js et obtient un score respectable de 91. L'app est une autre histoire — c'est un SPA React complexe — mais le site marketing démontre des choix architecturaux intelligents.

Stack : Next.js 15, CMS personnalisé (ils mangent leur propre nourriture — contenu géré dans Notion), CDN Cloudflare.

13. Shopify Admin (admin.shopify.com) — Score : 88

Celui-ci m'a surpris. Shopify a progressivement migré son panneau d'administration vers Next.js (s'éloignant de son monolithe Ruby on Rails), et les nouvelles sections fonctionnant sur Next.js sont notoirement plus snappy. Le score Lighthouse de 88 est impressionnant pour une application d'administration complexe.

Stack : Next.js 15 (App Router), système de design Polaris, GraphQL (Storefront API), couche de mise en cache edge personnalisée.

14-25 : Le bon milieu

# Site Score Choix technologique notable
14 Loom (loom.com) 93 Miniatures vidéo chargées en différé via Intersection Observer
15 Hashnode (hashnode.com) 92 Next.js multi-locataire avec ISR pour les articles
16 Hulu (hulu.com) 89 SSR streaming pour contenu personnalisé
17 TikTok Web (tiktok.com) 87 Énorme échelle, flux rendus edge
18 Twitch (twitch.tv) 86 Migration partielle, Next.js pour pages non-streaming
19 Binance (binance.com) 90 Données WebSocket en temps réel avec shell statique
20 Perplexity (perplexity.ai) 91 Streaming des réponses IA via RSC
21 Midjourney (midjourney.com) 89 Galerie avec grille d'images virtualisée
22 Arc Browser (arc.net) 93 Belles animations, JS reporté
23 Framer (framer.com) 90 Meta — un constructeur de sites web construit avec Next.js
24 Clerk (clerk.com) 92 Fournisseur d'auth utilisant son propre produit
25 Neon (neon.tech) 91 Société Postgres, docs MDX, ISR

Tier 3 : Bons performers (Lighthouse 75-84)

26. Nike (nike.com) — Score : 82

La présence e-commerce de Nike sur Next.js témoigne de la capacité du framework à gérer des catalogues massifs. Avec des millions de SKU, leurs pages de produits utilisent ISR avec revalidation à la demande. Le score n'est pas au top en raison des scripts tiers (analytique, tests A/B, personnalisation), mais l'architecture de base est solide.

27. Target (target.com) — Score : 79

Target a migré vers Next.js en 2025. Leurs pages de détail des produits obtiennent un bon score compte tenu du poids des exigences e-commerce — recommandations de produits, avis, vérifications d'inventaire et tarification qui rendent tout dynamiquement.

28-40 : Chevaux de travail de production

# Site Score Catégorie
28 Zapier (zapier.com) 84 SaaS / Automation
29 Grammarly (grammarly.com) 83 SaaS / Rédaction
30 Figma (figma.com) 81 Outils de conception
31 GitHub (github.com) — partiel 80 Outils de développeur
32 Coinbase (coinbase.com) 82 Fintech / Crypto
33 Opensea (opensea.io) 78 Marketplace NFT
34 Notion Calendar (calendar.notion.so) 84 Productivité
35 PostHog (posthog.com) 83 Analytique
36 Planetscale (planetscale.com) 84 Base de données
37 Tailwind CSS (tailwindcss.com) 82 Docs développeur
38 Prisma (prisma.io) 81 ORM / Base de données
39 Monday.com (monday.com) 79 Gestion de projets
40 Wiz (wiz.io) 83 Cybersécurité

Tier 4 : Lourds mais impressionnants (Lighthouse inférieur à 75)

Ces sites sacrifient les scores Lighthouse bruts pour l'interactivité riche. C'est un compromis valide — et parfois le bon.

41. ChatGPT Web (chatgpt.com) — Score : 72

L'interface web ChatGPT d'OpenAI fonctionne sur Next.js. Le score inférieur a du sens — c'est une interface conversationnelle en temps réel avec réponses streaming, connexions WebSocket et gestion d'état complexe. Vous ne pouvez pas server-render une interface de chat de la même manière que vous rendriez une page marketing.

42. Spotify (open.spotify.com) — Score : 68

Le lecteur web de Spotify est partiellement construit sur Next.js. Streaming audio, paroles en temps réel et l'état d'UI complexe rendent les scores Lighthouse élevés presque impossibles. Mais la performance perçue est excellente grâce aux motifs d'UI optimistes.

43-50 : Applications complexes

# Site Score Pourquoi le score est plus bas
43 Canva (canva.com) 71 Outil de conception lourd en canvas
44 Miro (miro.com) 69 Tableau blanc collaboratif en temps réel
45 Linear App (app.linear.app) 74 SPA de gestion de projets complexe
46 Vercel Dashboard (vercel.com/dashboard) 73 Logs de déploiement en temps réel, WebSockets
47 Retool (retool.com) 70 Constructeur d'outils internes, widgets lourds
48 Airtable (airtable.com) 67 Interface de feuille de calcul
49 Webflow (webflow.com/dashboard) 72 Constructeur visuel, drag-and-drop complexe
50 Pitch (pitch.com) 71 Outil de présentation, collab en temps réel

Avez-vous remarqué quelque chose ? Les sites marketing de ces produits (Linear, Vercel) obtiennent 95+, tandis que leurs applications réelles obtiennent 70-74. Ce n'est pas un échec — c'est des exigences différentes. Une application de gestion de projets avec synchronisation en temps réel ne peut pas être aussi légère qu'une page marketing. Comprendre cette distinction est crucial.

Motifs de stack parmi les 50 sites

Après avoir audité tous les 50 sites, des motifs clairs ont émergé :

Distribution d'hébergement

Plateforme Nombre Pourcentage
Vercel 28 56%
AWS (personnalisé) 9 18%
Cloudflare 6 12%
Auto-hébergé 4 8%
Autre 3 6%

Stratégie CSS

  • Tailwind CSS : 32 sites (64%)
  • CSS Modules : 8 sites (16%)
  • Styled Components / Emotion : 6 sites (12%)
  • Vanilla Extract : 4 sites (8%)

La domination de Tailwind est encore plus prononcée que je ne m'y attendais. En 2024, c'était environ 50%. Le passage vers CSS utilitaire dans les projets Next.js s'accélère.

Choix CMS

Sur les 50 sites, 31 utilisent une forme de CMS headless :

  • Sanity : 11 sites
  • Contentful : 7 sites
  • Personnalisé/interne : 6 sites
  • Notion en tant que CMS : 3 sites
  • Strapi : 2 sites
  • Payload CMS : 2 sites

L'avance de Sanity est notable. Ses capacités de preview en temps réel et le langage de requête GROQ s'associent naturellement aux server components de Next.js. Si vous construisez des sites orientés contenu, notre équipe de développement de CMS headless peut vous aider à choisir la bonne combinaison.

Distribution de la version Next.js

  • Next.js 15.x : 38 sites (76%)
  • Next.js 14.x : 10 sites (20%)
  • Next.js 13.x : 2 sites (4%)

La migration vers 15 a été plus rapide que la transition 13 → 14, probablement parce que Turbopack et PPR sont des raisons assez convaincantes de mettre à jour.

Répartition Core Web Vitals

En utilisant les données CrUX (métriques d'utilisateurs réels des utilisateurs Chrome), voici comment les 20 meilleurs sites se comportent selon les seuils de Google :

LCP (Largest Contentful Paint)

  • Bon (≤2,5s) : 18 des 20 sites (90%)
  • Doit être amélioré (2,5-4s) : 2 des 20 sites (10%)
  • Mauvais (>4s) : 0 sites

INP (Interaction to Next Paint — a remplacé FID en 2024)

  • Bon (≤200ms) : 16 des 20 sites (80%)
  • Doit être amélioré (200-500ms) : 4 des 20 sites (20%)
  • Mauvais (>500ms) : 0 sites

CLS (Cumulative Layout Shift)

  • Bon (≤0,1) : 19 des 20 sites (95%)
  • Doit être amélioré (0,1-0,25) : 1 des 20 sites (5%)
  • Mauvais (>0,25) : 0 sites

Le CLS est l'endroit où Next.js brille vraiment. Le composant next/image avec les props width/height requises, combiné avec next/font pour le chargement des polices, signifie que les décalages de mise en page sont presque éliminés par défaut. Vous devez activement travailler pour causer des problèmes de CLS dans une application Next.js moderne.

Décisions architecturales à voler

Après avoir étudié ces 50 sites, voici les motifs que j'apporterais dans chaque nouveau projet :

1. Partial Prerendering pour marketing + authentification

Vercel, Cal.com et Clerk utilisent tous PPR pour servir un shell statique avec l'état d'authentification en streaming. Cela élimine le problème du « flash de contenu non authentifié » sans sacrifier le TTFB.

// app/layout.tsx
import { Suspense } from 'react';
import { AuthButton } from './auth-button';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <nav>
          <Logo />
          {/* Shell statique se rendu instantanément */}
          <Suspense fallback={<AuthSkeleton />}>
            {/* État d'authentification se transmet dynamiquement */}
            <AuthButton />
          </Suspense>
        </nav>
        {children}
      </body>
    </html>
  );
}

2. Composants lourd reportés

Linear, Cursor et Railway reportent tous les composants WebGL/canvas/animation jusqu'après le LCP :

'use client';
import dynamic from 'next/dynamic';

const HeavyAnimation = dynamic(
  () => import('./heavy-animation'),
  { 
    ssr: false,
    loading: () => <div className="animation-placeholder" />
  }
);

3. Blocs de code rendus côté serveur

Stripe Docs, Supabase et Tailwind CSS rendent tous le code surligné sur le serveur, évitant le « flash de code non surligné » qui afflige la plupart des sites de documentation. Ils utilisent des bibliothèques comme shiki qui s'exécutent dans Node.js :

// Cela s'exécute sur le serveur — zéro JS client
import { codeToHtml } from 'shiki';

async function CodeBlock({ code, lang }) {
  const html = await codeToHtml(code, {
    lang,
    theme: 'github-dark'
  });
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

4. Edge Middleware pour géolocalisation/personnalisation

Binance, Nike et Hulu utilisent le middleware Next.js à la périphérie pour gérer la géolocalisation, les tests A/B et la personnalisation sans ajouter de poids côté client :

// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request) {
  const country = request.geo?.country || 'US';
  const response = NextResponse.next();
  response.headers.set('x-user-country', country);
  return response;
}

Ces motifs ne sont pas théoriques — ils fonctionnent en production maintenant, servant des millions d'utilisateurs. Si vous souhaitez une aide pour implémenter des architectures similaires, veuillez nous contacter ou consulter nos tarifs pour les estimations de projets.

FAQ

Comment puis-je vérifier si un site web est construit avec Next.js ?

La méthode la plus simple consiste à vérifier __NEXT_DATA__ dans la source de la page ou à rechercher /_next/ dans les demandes réseau. Vous pouvez également utiliser des extensions de navigateur comme Wappalyzer ou BuiltWith. Pour les sites App Router utilisant Server Components, le script __NEXT_DATA__ peut être absent — au lieu de cela, recherchez la charge utile RSC dans les demandes réseau (filtrez par « rsc » dans Chrome DevTools).

Pourquoi les sites marketing Next.js obtiennent-ils un score plus élevé que les applications Next.js ?

Les sites marketing sont principalement la livraison de contenu — ils servent un contenu statique ou semi-statique avec une interactivité côté client minimale. Les applications comme les outils de gestion de projets, les interfaces de chat ou les outils de conception nécessitent un JavaScript côté client lourd pour les fonctionnalités en temps réel, la gestion d'état et les interactions complexes. Un score Lighthouse de 72 pour un outil collaboratif en temps réel est en fait excellent. Ne comparez pas des pommes et des oranges.

Next.js est-il plus rapide qu'Astro pour les sites statiques ?

Pour les sites purement statiques et riches en contenu avec une interactivité minimale, Astro offre généralement des bundles plus petits et des temps de chargement plus rapides car il expédie zéro JavaScript par défaut. Next.js gagne lorsque vous avez besoin d'un mélange de contenu statique et de fonctionnalités dynamiques, de routes API, d'authentification ou d'interactivité complexe. De nombreuses équipes (y compris la nôtre) utilisent les deux — Astro pour les docs/blogs et Next.js pour les applications.

Quel score Lighthouse devrais-je viser avec Next.js ?

Pour les sites marketing et les pages d'atterrissage, visez 90+ sur mobile et 95+ sur desktop. Pour les pages de produits d'e-commerce, 80+ est réaliste compte tenu des exigences en matière de scripts tiers. Pour les applications web complexes, tout ce qui dépasse 70 est solide. La métrique réelle à surveiller est Core Web Vitals à partir des données CrUX — cela reflète l'expérience utilisateur réelle, pas les tests synthétiques de laboratoire.

L'hébergement Vercel rend-il Next.js plus rapide ?

Oui, mesurément. Le réseau edge de Vercel est optimisé spécifiquement pour Next.js — des fonctionnalités comme ISR, PPR et edge middleware s'exécutent nativement sur leur infrastructure. Dans mes tests, la même application Next.js déployée sur Vercel obtient généralement un score 3-8 points plus élevé sur Lighthouse par rapport à un déploiement Node.js générique sur AWS EC2. Cela dit, AWS avec CloudFront, ou Cloudflare Workers, peut égaler la performance de Vercel avec plus d'efforts de configuration.

Quel CMS headless fonctionne le mieux avec Next.js en 2026 ?

D'après cette analyse, Sanity est le choix le plus populaire parmi les sites Next.js haute performance. Son preview en temps réel, le langage de requête GROQ et le support TypeScript s'intègrent naturellement à l'App Router. Contentful est la valeur par défaut d'entreprise. Payload CMS gagne du terrain en tant qu'alternative open-source. Le meilleur choix dépend de vos besoins en modélisation de contenu, de la taille de l'équipe et du budget.

Comment ces sites gèrent-ils les images pour la performance ?

Presque tous les 50 sites utilisent next/image avec conversion AVIF/WebP automatique. Les top performers implémentent également le chargement paresseux agressif — seules les images au-dessus de la ligne de flottaison utilisent priority={true}, tout le reste se charge en différé via Intersection Observer. Plusieurs sites (Linear, Resend) utilisent des illustrations SVG au lieu d'images raster pour les sections héros, éliminant entièrement l'optimisation d'image.

Puis-je construire un site e-commerce avec Next.js qui obtient un score supérieur à 90 ?

Oui, mais cela nécessite de la discipline. Les sites de cette liste qui obtiennent des scores 90+ sur les pages e-commerce le font en auto-hébergeant l'analytique, en minimisant les scripts tiers, en utilisant des composants serveur pour la récupération de données de produits et en implémentant la mise en cache agressive avec ISR. Le moment où vous ajoutez Google Tag Manager, un widget de chat et trois outils de tests A/B, vous regardez 75-85 quel que soit votre choix de framework.