Ce n'est pas un autre article de compilation 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 la pile, et évalué par rapport aux seuils Core Web Vitals à partir de début 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 : Constructions vraies de production

Pourquoi Next.js domine la production en 2026

Next.js alimente environ 1,2 million de sites web actifs à partir du Q1 2026, selon les données BuiltWith. C'est en hausse par rapport à environ 900K début 2025. La dominance du framework n'est pas accidentelle — elle est le résultat d'avantages techniques spécifiques qui importent quand vous expédiez de vrais produits.

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

Mais voici ce qui importe vraiment : l'écosystème. L'infrastructure Vercel, la couche middleware, les améliorations ISR, et le support de première classe pour l'informatique de bordure signifient que les équipes peuvent expédier des applications distribuées globalement sans gérer leur propre infrastructure CDN. C'est pourquoi vous voyez tout le monde, des startups aux entreprises Fortune 500, construire dessus.

Si vous envisagez Next.js pour votre prochain projet, notre équipe de développement Next.js a expédié 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 bureau) — 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 pile
  • CrUX Dashboard pour les Core Web Vitals des utilisateurs réels où disponibles
  • Afficher la 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 à partir d'un emplacement US East sur une connexion standard (limitation 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 marquant 92 aujourd'hui pourrait atteindre 88 demain. J'utilise ceux-ci comme des indicateurs directionnels, pas comme du gospel. Les données Core Web Vitals de CrUX (utilisateurs réels) sont beaucoup plus fiables pour comprendre l'expérience utilisateur réelle.

Les 50 meilleurs sites Next.js

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

50 meilleurs sites Next.js en 2026 : Constructions vraies de production - architecture

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

Ces sites sont absurdement rapides. Ils ont fait des compromis difficiles pour arriver ici.

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

Linear est l'étalon-or de la performance Next.js. Leur site marketing atteint constamment 98+ sur Lighthouse bureau. LCP sous 0,8s. CLS de 0. Zéro changement de mise en page.

Pile : Next.js 15 (App Router), Turbopack, système de conception personnalisé, Vercel Edge Network, pas d'analyse tiers sur la charge initiale.

Pourquoi c'est rapide : L'équipe de Linear repousse agressivement tout ce qui n'est pas critique. Leur animation héroïque utilise des techniques CSS uniquement avec des transformations composées par 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 agressive. Ils utilisent également un découpage de code granulaire au niveau des routes — chaque page charge uniquement ce dont elle a besoin.

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

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

Vous vous attendriez à ce que le site de Vercel soit rapide, et il livre. La page d'accueil se rend en moins de 600ms sur bureau.

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

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

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

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

Pile : 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 CMS sans tête associée à des stratégies de mise en cache intelligentes peut fournir des temps de charge inférieur à une seconde même avec du contenu riche.

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

Le site marketing de Cursor est un cours magistral de retenue. Malgré la vitrine d'un éditeur de code IA avec des démos complexes, la page se charge très rapidement.

Pile : Next.js 15, Framer Motion (chargement paresseux), éléments WebGL personnalisés (différés), Vercel.

Pourquoi c'est rapide : L'animation de fond WebGL ne se charge pas avant LCP. Le contenu au-dessus du pli est du HTML et du CSS pur. Priorisation intelligente.

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

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

Pile : 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 de 60 secondes. Pile : Next.js 15, Prisma, tRPC, Tailwind.

7. Raycast (raycast.com) — Score : 95. Magnifiquement animé mais discipliné concernant les paquets JavaScript. Utilise extensively next/image.

8. Resend (resend.com) — Score : 97. L'entreprise d'API de courrier électronique de Zeno Rocha. Conception minimaliste, performance maximale. L'un des sites Next.js les plus minces que j'aie jamais auditée.

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

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

Tier 2 : Sites de production excellents (85-94 Lighthouse)

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 se rendent côté serveur, et la navigation semble native.

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

Pourquoi cela importe : Stripe prouve que les sites de documentation — qui sont riches en contenu et riches en navigation — peuvent être extrêmement rapides 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) fonctionnent sur Next.js et obtiennent un score respectable de 91. L'application est une histoire différente — c'est une application React SPA complexe — mais le site marketing démontre des choix architecturaux intelligents.

Pile : Next.js 15, CMS personnalisé (ils mangent leur propre nourriture pour chiens — 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 tableau de bord d'administrateur vers Next.js (abandonnant leur monolithe Ruby on Rails), et les nouvelles sections fonctionnant sur Next.js sont notablement plus rapides. Le score Lighthouse de 88 est impressionnant pour une application d'administration complexe.

Pile : Next.js 15 (App Router), système de conception Polaris, GraphQL (API Storefront), couche de mise en cache des bords personnalisée.

14-25 : Le milieu solide

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

Tier 3 : Performeurs solides (75-84 Lighthouse)

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

La présence de commerce électronique de Nike sur Next.js est un témoignage du framework gérant des catalogues massifs. Avec des millions de SKU, leurs pages de produits utilisent ISR avec revalidation à la demande. Le score n'est pas au sommet en raison de scripts tiers (analytics, test 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étails de produits obtiennent un bon score compte tenu du poids des exigences de commerce électronique — recommandations de produits, avis, vérifications d'inventaire, et prix rendus dynamiquement.

28-40 : Chevaux de trait de production

# Site Score Catégorie
28 Zapier (zapier.com) 84 SaaS / Automatisation
29 Grammarly (grammarly.com) 83 SaaS / Écriture
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 Marché NFT
34 Notion Calendar (calendar.notion.so) 84 Productivité
35 PostHog (posthog.com) 83 Analytics
36 Planetscale (planetscale.com) 84 Base de données
37 Tailwind CSS (tailwindcss.com) 82 Docs de développeur
38 Prisma (prisma.io) 81 ORM / Base de données
39 Monday.com (monday.com) 79 Gestion de projet
40 Wiz (wiz.io) 83 Cybersécurité

Tier 4 : Lourd mais impressionnant (Sous 75 Lighthouse)

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 des réponses en streaming, des connexions WebSocket, et une gestion d'état complexe. Vous ne pouvez pas rendre côté serveur 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 Spotify est partiellement construit sur Next.js. La diffusion audio, les paroles en temps réel, et l'état UI complexe rendent les scores Lighthouse élevés presque impossibles. Mais la performance perçue est excellente grâce aux motifs UI optimistes.

43-50 : Applications complexes

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

Remarquez 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 — ce sont des exigences différentes. Une application de gestion de projet avec synchronisation en temps réel ne peut pas être aussi légère qu'une page marketing. Comprendre cette distinction est crucial.

Modèles de pile sur les 50 sites

Après avoir audité 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 dominance de Tailwind est encore plus prononcée que je ne l'aurais cru. En 2024, c'était environ 50%. Le passage au CSS utilitaire dans les projets Next.js s'accélère.

Choix de CMS

Sur les 50 sites, 31 utilisent une forme de CMS sans tête :

  • 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 d'aperçu en temps réel et son 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 CMS sans tête peut vous aider à choisir la bonne combinaison.

Distribution de 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 suffisamment convaincantes pour passer à la version supérieure.

Ventilation Core Web Vitals

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

LCP (Largest Contentful Paint)

  • Bon (≤2,5s): 18 sur 20 sites (90%)
  • Besoin d'amélioration (2,5-4s): 2 sur 20 sites (10%)
  • Mauvais (>4s): 0 sites

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

  • Bon (≤200ms): 16 sur 20 sites (80%)
  • Besoin d'amélioration (200-500ms): 4 sur 20 sites (20%)
  • Mauvais (>500ms): 0 sites

CLS (Cumulative Layout Shift)

  • Bon (≤0,1): 19 sur 20 sites (95%)
  • Besoin d'amélioration (0,1-0,25): 1 sur 20 sites (5%)
  • Mauvais (>0,25): 0 sites

CLS est l'endroit où Next.js brille vraiment. Le composant next/image avec props de largeur/hauteur requises, combiné à next/font pour le chargement des polices, signifie que les changements 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 dignes d'être imitées

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

1. Partial Prerendering pour Marketing + Auth

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 déconnecté" 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 />
          {/* Le shell statique se rend instantanément */}
          <Suspense fallback={<AuthSkeleton />}>
            {/* L'état d'authentification arrive en streaming dynamiquement */}
            <AuthButton />
          </Suspense>
        </nav>
        {children}
      </body>
    </html>
  );
}

2. Composants lourd différés

Linear, Cursor, et Railway diffèrent tous les composants WebGL/canvas/animation jusqu'après 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é syntaxiquement 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 bordure 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 s'exécutent en production en ce moment même, servant des millions d'utilisateurs. Si vous voulez de l'aide pour implémenter des architectures similaires, contactez notre équipe ou consultez notre tarification pour les estimations de projet.

FAQ

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

La méthode la plus simple est de vérifier __NEXT_DATA__ dans la source de la page ou de chercher /_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, la balise script __NEXT_DATA__ peut être absente — au lieu de cela, cherchez la charge utile RSC dans les demandes réseau (filtrez par "rsc" dans Chrome DevTools).

Pourquoi les sites marketing Next.js obtiennent-ils des scores plus élevés que les applications Next.js ?

Les sites marketing livrent principalement du contenu — ils servent du contenu statique ou semi-statique avec une interactivité minimale côté client. Les applications comme les outils de gestion de projet, les interfaces de chat, ou les outils de conception nécessitent du 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 à des oranges.

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

Pour les sites purement statiques et orientés contenu avec une interactivité minimale, Astro offre généralement des paquets plus petits et des temps de chargement plus rapides car il expédie zéro JavaScript par défaut. Next.js gagne quand 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 de destination, visez 90+ sur mobile et 95+ sur bureau. Pour les pages de produits de commerce électronique, 80+ est réaliste compte tenu des exigences de scripts tiers. Pour les applications web complexes, tout ce qui dépasse 70 est solide. La vraie métrique à surveiller est Core Web Vitals des données CrUX — cela reflète l'expérience utilisateur réelle, pas les tests de laboratoire synthétiques.

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

Oui, mesurément. Le réseau de bord de Vercel est optimisé spécifiquement pour Next.js — des fonctionnalités comme ISR, PPR, et le middleware des bords fonctionnent nativement sur leur infrastructure. Dans mes tests, la même application Next.js déployée sur Vercel obtient généralement 3-8 points plus élevés 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 sans tête fonctionne le mieux avec Next.js en 2026 ?

Sur la base de cette analyse, Sanity est le choix le plus populaire parmi les sites Next.js haute performance. Son aperçu en temps réel, son langage de requête GROQ, et son support TypeScript s'intègrent naturellement avec l'App Router. Contentful est la valeur par défaut de l'entreprise. Payload CMS gagne du terrain en tant que alternative open-source. Le meilleur choix dépend de vos besoins de 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 automatique AVIF/WebP. Les performeurs supérieurs mettent également en œuvre un chargement paresseux agressif — seules les images au-dessus du pli utilisent priority={true}, tout le reste charge paresseusement via Intersection Observer. Plusieurs sites (Linear, Resend) utilisent des illustrations SVG au lieu d'images raster pour les sections héroïques, éliminant entièrement l'optimisation d'image.

Puis-je construire un site de commerce électronique 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 de commerce électronique le font en auto-hébergeant l'analyse, en minimisant les scripts tiers, en utilisant les server components pour la récupération des données de produits, et en implémentant une mise en cache agressive avec ISR. Le moment où vous ajoutez Google Tag Manager, un widget de chat, et trois outils de test A/B, vous regardez 75-85 indépendamment du choix de votre framework.