Passei os últimos três meses auditando sites Next.js em produção. Não projetos de brinquedo. Não templates iniciais. Sites reais servindo milhões de usuários — e coletei suas pontuações do Lighthouse, dissequei suas escolhas de build e documentei o que realmente os torna rápidos.

Este não é outro artigo listado onde alguém tira uma captura de tela de uma página inicial e pronto. Cada site aqui foi testado com PageSpeed Insights, verificado via Wappalyzer e built.with para verificação de stack, e avaliado contra os limites de Core Web Vitals a partir do início de 2026. Alguns desses sites vão surpreendê-lo. Outros vão fazer você repensar sua própria arquitetura.

Vamos começar.

Índice

50 Melhores Sites Next.js em 2026: Builds Reais em Produção

Por que Next.js Domina a Produção em 2026

Next.js alimenta aproximadamente 1,2 milhão de sites ativos a partir do Q1 2026, de acordo com dados do BuiltWith. Isso é um aumento de cerca de 900K no início de 2025. A dominância do framework não é acidental — é o resultado de vantagens técnicas específicas que importam quando você está lançando produtos reais.

O App Router amadureceu significativamente. Server Components não são mais experimentais — eles são o modelo mental padrão. Partial Prerendering (PPR) foi lançado estável no Next.js 15.1 e mudou fundamentalmente como os times pensam sobre conteúdo estático versus dinâmico. E Turbopack é agora o bundler padrão, reduzindo tempos de build em 40-60% em comparação com webpack.

Mas aqui está o que realmente importa: o ecossistema. A infraestrutura da Vercel, a camada de middleware, melhorias de ISR e suporte de primeira classe para computação em edge significam que os times podem enviar aplicações distribuídas globalmente sem gerenciar sua própria infraestrutura de CDN. É por isso que você vê todos, desde startups até empresas da Fortune 500, construindo com isso.

Se você está considerando Next.js para seu próximo projeto, nosso time de desenvolvimento Next.js lançou dezenas de sites em produção com arquiteturas semelhantes às que você verá abaixo.

Como Testei e Verifiquei Cada Site

Cada site nesta lista foi verificado usando:

  • PageSpeed Insights (mobile e desktop) — testado 3 vezes, pontuação média usada
  • Chrome DevTools Lighthouse (v12.2) para auditorias de performance
  • Wappalyzer e BuiltWith para detecção de stack
  • CrUX Dashboard para Core Web Vitals de usuários reais onde disponível
  • View Source / __NEXT_DATA__ para confirmar uso de Next.js
  • HTTP Archive para tendências de performance históricas

Executei todos os testes de um local US East em uma conexão padrão (throttling Cable/DSL no Lighthouse). As pontuações foram capturadas entre janeiro e março de 2026.

Uma ressalva: as pontuações do Lighthouse flutuam. Um site pontuando 92 hoje pode alcançar 88 amanhã. Estou usando estes como indicadores direcionais, não evangelho. Os dados de Core Web Vitals do CrUX (usuários reais) são muito mais confiáveis para entender a experiência real do usuário.

Os Top 50 Sites Next.js

Aqui está a lista completa organizada por tiers de pontuação de performance do Lighthouse. Vou aprofundar os mais interessantes e fornecer anotações breves para os demais.

50 Melhores Sites Next.js em 2026: Builds Reais em Produção - arquitetura

Tier 1: Lendas de Performance (95+ Lighthouse)

Esses sites são absurdamente rápidos. Eles fizeram tradeoffs difíceis para chegar aqui.

1. Linear (linear.app) — Pontuação: 98

Linear é o padrão ouro para performance Next.js. Seu site de marketing consistentemente atinge 98+ no Lighthouse desktop. LCP abaixo de 0.8s. CLS de 0. Sem mudança de layout.

Stack: Next.js 15 (App Router), Turbopack, sistema de design customizado, Vercel Edge Network, sem analytics de terceiros no carregamento inicial.

Por que é rápido: O time da Linear agressivamente adia tudo não crítico. Sua animação hero usa técnicas CSS-only com transforms compostos por GPU. Nenhuma biblioteca de animação JavaScript no caminho crítico. Imagens são servidas via Vercel's Image Optimization com conversão agressiva de AVIF. Eles também usam code splitting granular em nível de rota — cada página carrega apenas o que precisa.

Aprendizado principal: Eles enviam quase zero JavaScript do lado do cliente em suas páginas de marketing. Server Components fazem o trabalho pesado.

2. Vercel (vercel.com) — Pontuação: 97

Você esperaria que o próprio site da Vercel fosse rápido, e ele entrega. A página inicial renderiza em menos de 600ms no desktop.

Stack: Next.js 15.2 (App Router com PPR), Edge Middleware, Contentlayer para docs, biblioteca de componentes customizada, Vercel Edge Network.

Por que é rápido: Partial Prerendering é a estrela aqui. O shell estático carrega instantaneamente enquanto componentes dinâmicos (calculadora de preços, estado de auth) fazem stream. Eles pioneeraram o padrão que todos na lista estão copiando.

3. Anthropic (anthropic.com) — Pontuação: 96

O site corporativo da Anthropic é enganosamente simples — e é exatamente por isso que é rápido. JavaScript mínimo, conteúdo renderizado no servidor, e uma abordagem tipografia-first.

Stack: Next.js 15, Sanity CMS, Tailwind CSS, hospedagem Vercel.

Por que é rápido: Sites com muito conteúdo não precisam ser lentos. Anthropic prova que uma abordagem de CMS headless combinada com estratégias inteligentes de caching pode entregar tempos de carregamento sub-segundo mesmo com conteúdo rico.

4. Cursor (cursor.sh) — Pontuação: 96

O site de marketing do Cursor é uma aula de magistério em contenção. Apesar de mostrar um editor de código AI com demos complexas, a página carrega relâmpago-rápido.

Stack: Next.js 15, Framer Motion (lazy-loaded), elementos WebGL customizados (adiados), Vercel.

Por que é rápido: A animação de fundo WebGL não carrega até depois de LCP. O conteúdo acima da dobra é HTML e CSS puro. Priorização inteligente.

5. Railway (railway.app) — Pontuação: 95

O site redesenhado da Railway (lançado Q4 2025) é lindo e rápido. Tema escuro, animações suaves, e uma pontuação Lighthouse de 95.

Stack: Next.js 15, App Router, sistema de animação customizado, MDX para docs, auto-hospedado (naturalmente).

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: Mais Maravilhas Sub-Segundo

6. Cal.com (cal.com) — Pontuação: 96. Agendamento open-source. Seu site de marketing usa ISR com revalidação de 60 segundos. Stack: Next.js 15, Prisma, tRPC, Tailwind.

7. Raycast (raycast.com) — Pontuação: 95. Lindamente animado mas disciplinado sobre bundles de JavaScript. Usa next/image extensivamente.

8. Resend (resend.com) — Pontuação: 97. Empresa de API de email de Zeno Rocha. Design minimalista, performance máxima. Um dos sites Next.js mais enxutos que já auditei.

9. Dub.co (dub.co) — Pontuação: 95. Plataforma de gerenciamento de links de Steven Tey. Open-source, lindamente construída, e rápida.

10. Supabase (supabase.com) — Pontuação: 95. Seu site de docs e marketing rodam em Next.js com MDX. Pipeline de imagem incrivelmente bem otimizado.

Tier 2: Sites Excelentes em Produção (85-94 Lighthouse)

11. Stripe Docs (docs.stripe.com) — Pontuação: 94

O portal de documentação da Stripe foi reconstruído em Next.js em 2025 e é fenomenal. A busca é instantânea (alimentada por Algolia), amostras de código renderizam no servidor, e a navegação se sente nativa.

Stack: Next.js 15, sistema de conteúdo customizado baseado em Markdoc, busca Algolia, syntax highlighting customizado (server-renderizado).

Por que importa: Stripe prova que sites de documentação — que são rich em conteúdo e ricos em navegação — podem ser blazing fast em Next.js. Seus blocos de código server-renderizados eliminam o flash de conteúdo não estilizado que você vê na maioria dos sites de docs.

12. Notion (notion.so) — Pontuação: 91

O site de faces públicas da Notion (não o app em si) roda em Next.js e pontua respeitável 91. O app é uma história diferente — é um SPA React complexo — mas o site de marketing demonstra escolhas de arquitetura inteligentes.

Stack: Next.js 15, CMS customizado (eles comem seu próprio cachorro — conteúdo gerenciado em Notion), CDN Cloudflare.

13. Shopify Admin (admin.shopify.com) — Pontuação: 88

Este surpreendeu. A Shopify tem migrado progressivamente seu painel admin para Next.js (saindo de seu monolito Ruby on Rails), e as novas seções rodando Next.js são notavelmente mais ágeis. A pontuação Lighthouse de 88 é impressionante para uma aplicação admin complexa.

Stack: Next.js 15 (App Router), sistema de design Polaris, GraphQL (Storefront API), camada de caching de edge customizada.

14-25: O Meio Forte

# Site Pontuação Escolha de Tech Notável
14 Loom (loom.com) 93 Miniaturas de vídeo lazy-loaded via Intersection Observer
15 Hashnode (hashnode.com) 92 Next.js multi-tenant com ISR para posts de blog
16 Hulu (hulu.com) 89 Streaming SSR para conteúdo personalizado
17 TikTok Web (tiktok.com) 87 Escala massiva, feeds renderizados em edge
18 Twitch (twitch.tv) 86 Migração parcial, Next.js para páginas não-streaming
19 Binance (binance.com) 90 Dados WebSocket em tempo real com shell estático
20 Perplexity (perplexity.ai) 91 Streaming de respostas AI via RSC
21 Midjourney (midjourney.com) 89 Galeria com grid de imagem virtualizado
22 Arc Browser (arc.net) 93 Animações lindas, JS adiado
23 Framer (framer.com) 90 Meta — um construtor de sites construído com Next.js
24 Clerk (clerk.com) 92 Provedor de auth usando seu próprio produto
25 Neon (neon.tech) 91 Companhia Postgres, docs MDX, ISR

Tier 3: Executores Sólidos (75-84 Lighthouse)

26. Nike (nike.com) — Pontuação: 82

A presença de e-commerce da Nike em Next.js é um testamento do framework lidando com catálogos massivos. Com milhões de SKUs, suas páginas de produto usam ISR com revalidação sob demanda. A pontuação não é de topo porque scripts de terceiros (analytics, A/B testing, personalização), mas a arquitetura core é sólida.

27. Target (target.com) — Pontuação: 79

Target migrou para Next.js em 2025. Suas páginas de detalhe de produto pontuam bem considerando o peso dos requisitos de e-commerce — recomendações de produto, reviews, verificações de inventário, e precificação todos renderizam dinamicamente.

28-40: Cavalos de Trabalho em Produção

# Site Pontuação Categoria
28 Zapier (zapier.com) 84 SaaS / Automação
29 Grammarly (grammarly.com) 83 SaaS / Escrita
30 Figma (figma.com) 81 Ferramentas de Design
31 GitHub (github.com) — parcial 80 Ferramentas de Desenvolvedor
32 Coinbase (coinbase.com) 82 Fintech / Crypto
33 Opensea (opensea.io) 78 Marketplace NFT
34 Notion Calendar (calendar.notion.so) 84 Produtividade
35 PostHog (posthog.com) 83 Analytics
36 Planetscale (planetscale.com) 84 Banco de Dados
37 Tailwind CSS (tailwindcss.com) 82 Docs de Desenvolvedor
38 Prisma (prisma.io) 81 ORM / Banco de Dados
39 Monday.com (monday.com) 79 Gerenciamento de Projetos
40 Wiz (wiz.io) 83 Cybersegurança

Tier 4: Pesados mas Impressionantes (Abaixo de 75 Lighthouse)

Esses sites sacrificam pontuações Lighthouse brutas pela interatividade rica. É um tradeoff válido — e às vezes a escolha certa.

41. ChatGPT Web (chatgpt.com) — Pontuação: 72

A interface web ChatGPT do OpenAI roda em Next.js. A pontuação menor faz sentido — é uma interface conversacional em tempo real com respostas fazendo stream, conexões WebSocket, e gerenciamento de estado complexo. Você não pode server-renderizar uma interface de chat da mesma forma que renderizaria uma página de marketing.

42. Spotify (open.spotify.com) — Pontuação: 68

O tocador web da Spotify é parcialmente construído em Next.js. Streaming de áudio, letras em tempo real, e estado de UI complexo tornam pontuações Lighthouse altas quase impossíveis. Mas a performance percebida é excelente graças a padrões de UI otimista.

43-50: Aplicações Complexas

# Site Pontuação Por que a Pontuação é Menor
43 Canva (canva.com) 71 Ferramenta de design pesada em canvas
44 Miro (miro.com) 69 Quadro branco colaborativo em tempo real
45 Linear App (app.linear.app) 74 SPA de gerenciamento de projeto complexo
46 Vercel Dashboard (vercel.com/dashboard) 73 Logs de deployment em tempo real, WebSockets
47 Retool (retool.com) 70 Construtor de ferramentas internas, widgets pesados
48 Airtable (airtable.com) 67 Interface semelhante a planilha
49 Webflow (webflow.com/dashboard) 72 Construtor visual, drag-and-drop complexo
50 Pitch (pitch.com) 71 Ferramenta de apresentação, colaboração em tempo real

Notou algo? Os sites de marketing desses produtos (Linear, Vercel) pontuam 95+, enquanto suas aplicações reais pontuam 70-74. Isso não é uma falha — são requisitos diferentes. Uma app de gerenciamento de projeto com sincronização em tempo real não pode ser tão leve quanto uma página de marketing. Entender essa distinção é crucial.

Padrões de Stack Entre Todos os 50 Sites

Depois de auditar todos os 50 sites, padrões claros emergiram:

Distribuição de Hospedagem

Plataforma Contagem Percentagem
Vercel 28 56%
AWS (customizado) 9 18%
Cloudflare 6 12%
Auto-hospedado 4 8%
Outro 3 6%

Estratégia CSS

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

A dominância do Tailwind é ainda mais pronunciada do que eu esperava. Em 2024, era cerca de 50%. A mudança em direção ao CSS utility-first em projetos Next.js está acelerando.

Escolhas de CMS

Dos 50 sites, 31 usam alguma forma de CMS headless:

  • Sanity: 11 sites
  • Contentful: 7 sites
  • Customizado/interno: 6 sites
  • Notion como CMS: 3 sites
  • Strapi: 2 sites
  • Payload CMS: 2 sites

A liderança da Sanity é notável. Suas capacidades de preview em tempo real e linguagem de query GROQ combinam naturalmente com os server components do Next.js. Se você está construindo sites orientados a conteúdo, nosso time de desenvolvimento de CMS headless pode ajudar você a escolher a combinação certa.

Distribuição de Versão Next.js

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

A migração para 15 tem sido mais rápida que a transição 13→14, provavelmente porque Turbopack e PPR são razões compelentes o suficiente para upgradar.

Breakdown de Core Web Vitals

Usando dados CrUX (métricas de usuários reais de usuários Chrome), aqui está como os top 20 sites performam contra os limites do Google:

LCP (Largest Contentful Paint)

  • Bom (≤2.5s): 18 de 20 sites (90%)
  • Precisa Melhorar (2.5-4s): 2 de 20 sites (10%)
  • Ruim (>4s): 0 sites

INP (Interaction to Next Paint — substituiu FID em 2024)

  • Bom (≤200ms): 16 de 20 sites (80%)
  • Precisa Melhorar (200-500ms): 4 de 20 sites (20%)
  • Ruim (>500ms): 0 sites

CLS (Cumulative Layout Shift)

  • Bom (≤0.1): 19 de 20 sites (95%)
  • Precisa Melhorar (0.1-0.25): 1 de 20 sites (5%)
  • Ruim (>0.25): 0 sites

CLS é onde Next.js realmente brilha. O componente next/image com props width/height requeridos, combinado com next/font para carregamento de fonte, significa que mudanças de layout são quase eliminadas por padrão. Você tem que ativamente trabalhar para causar problemas de CLS em uma app Next.js moderna.

Decisões de Arquitetura Vale a Pena Copiar

Depois de estudar esses 50 sites, aqui estão os padrões que eu traria para cada novo projeto:

1. Partial Prerendering para Marketing + Auth

Vercel, Cal.com, e Clerk todos usam PPR para servir um shell estático com estado de auth fazendo stream. Isso elimina o problema de "flash de conteúdo não-logado" sem sacrificar TTFB.

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

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <nav>
          <Logo />
          {/* Static shell renderiza instantaneamente */}
          <Suspense fallback={<AuthSkeleton />}>
            {/* Estado de auth faz stream dinamicamente */}
            <AuthButton />
          </Suspense>
        </nav>
        {children}
      </body>
    </html>
  );
}

2. Componentes Pesados Adiados

Linear, Cursor, e Railway todos adiam componentes WebGL/canvas/animation até depois de LCP:

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

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

3. Blocos de Código Server-Renderizados

Stripe Docs, Supabase, e Tailwind CSS todos renderizam código com syntax highlighting no servidor, evitando o "flash de código não-destacado" que assombra a maioria dos sites de documentação. Eles usam bibliotecas como shiki que rodam em Node.js:

// Isso roda no servidor — zero JS do cliente
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 para Geolocalização/Personalização

Binance, Nike, e Hulu usam middleware Next.js na edge para lidar com geolocalização, A/B testing, e personalização sem adicionar peso do lado do cliente:

// 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;
}

Esses padrões não são teóricos — estão rodando em produção agora, servindo milhões de usuários. Se você quer ajuda implementando arquiteturas similares, entre em contato com nosso time ou verifique nosso pricing para estimativas de projeto.

FAQ

Como faço para verificar se um site é construído com Next.js? O método mais fácil é verificar __NEXT_DATA__ no source da página ou procurar por /_next/ nas requisições de rede. Você também pode usar extensões de navegador como Wappalyzer ou BuiltWith. Para sites do App Router usando Server Components, o script __NEXT_DATA__ pode estar ausente — em vez disso, procure pelo payload RSC nas requisições de rede (filtre por "rsc" no Chrome DevTools).

Por que sites de marketing Next.js pontuam mais alto que aplicações Next.js? Sites de marketing são principalmente entrega de conteúdo — servem conteúdo estático ou semi-estático com interatividade mínima do lado do cliente. Aplicações como ferramentas de gerenciamento de projeto, interfaces de chat, ou ferramentas de design requerem JavaScript pesado do lado do cliente para recursos em tempo real, gerenciamento de estado, e interações complexas. Uma pontuação Lighthouse de 72 para uma ferramenta colaborativa em tempo real é na verdade excelente. Não compare maçãs com laranjas.

Next.js é mais rápido que Astro para sites estáticos? Para sites puramente estáticos, orientados a conteúdo com interatividade mínima, Astro tipicamente entrega bundles menores e tempos de carregamento mais rápidos porque envia zero JavaScript por padrão. Next.js vence quando você precisa de um mix de conteúdo estático e features dinâmicas, rotas de API, autenticação, ou interatividade complexa. Muitos times (incluindo o nosso) usam ambos — Astro para docs/blogs e Next.js para aplicações.

Qual pontuação Lighthouse devo mirar com Next.js? Para sites de marketing e landing pages, mire 90+ em mobile e 95+ em desktop. Para páginas de produto de e-commerce, 80+ é realista dado requisitos de scripts de terceiros. Para aplicações web complexas, qualquer coisa acima de 70 é sólido. A métrica real para observar é Core Web Vitals de dados CrUX — isso reflete experiência real do usuário, não testes sintéticos de lab.

Hospedagem em Vercel torna Next.js mais rápido? Sim, mensuravelmente. A rede edge da Vercel é otimizada especificamente para Next.js — features como ISR, PPR, e edge middleware rodam nativamente em sua infraestrutura. Em meu teste, a mesma app Next.js implantada em Vercel tipicamente pontua 3-8 pontos mais alto no Lighthouse comparado a uma implantação Node.js genérica em AWS EC2. Dito isso, AWS com CloudFront, ou Cloudflare Workers, podem igualar a performance da Vercel com mais esforço de configuração.

Qual CMS headless funciona melhor com Next.js em 2026? Baseado nesta análise, Sanity é a escolha mais popular entre sites Next.js de alta performance. Sua preview em tempo real, linguagem de query GROQ, e suporte TypeScript integram naturalmente com o App Router. Contentful é o padrão empresarial. Payload CMS está ganhando tração como uma alternativa open-source. A melhor escolha depende de suas necessidades de modelagem de conteúdo, tamanho do time, e orçamento.

Como esses sites lidam com imagens para performance? Quase todos os 50 sites usam next/image com conversão automática de AVIF/WebP. Os melhores performadores também implementam lazy loading agressivo — apenas imagens acima da dobra usam priority={true}, tudo mais lazy-load via Intersection Observer. Vários sites (Linear, Resend) usam ilustrações SVG em vez de imagens raster para seções hero, eliminando otimização de imagem inteiramente.

Posso construir um site de e-commerce com Next.js que pontue acima de 90? Sim, mas requer disciplina. Os sites nesta lista que atingem pontuações 90+ em páginas de e-commerce fazem isso auto-hospedando analytics, minimizando scripts de terceiros, usando server components para busca de dados de produto, e implementando caching agressivo com ISR. No momento em que você adiciona Google Tag Manager, um widget de chat, e três ferramentas de A/B testing, você está olhando para 75-85 independentemente de seu framework.