2026年の最高のNext.jsウェブサイト50選:実際のビルド + 検証済みスコア
ブラウザがNext.jsサイトをリクエストします。最初のペイントは847ミリ秒で発火します。Lighthouseは98を返します。ネットワークタブを開くと、14の最適化されたリクエストが完璧なシーケンスでカスケードするのを目撃します — 画像フォーマットはデバイス機能によって選択され、フォントはラテン文字にサブセット化され、JavaScriptは6つの遅延読み込みチャンク全体に分割されます。これはデモではありません。毎日340,000ユーザーにサービスを提供するLinearの本番ビルドです。3ヶ月間で、私はこのような50のサイトを監査しました — チュートリアルやスターターではなく、数百万のセッションを処理する実際のNext.jsアプリケーションです。私は彼らのLighthouseレポートをプルし、レンダーパスをトレースし、62スコアのブログから98スコアのSaaSプラットフォームを分離するあらゆるアーキテクチャ選択を文書化しました。浮上したパターンは、Redditの最適化アドバイスの半分に矛盾します。
これは、誰かがホームページをスクリーンショットして終わりという別のリストではありません。ここのすべてのサイトは、PageSpeed Insightsでテストされ、WappalyzerとBuiltWithで検証され、スタック検証のために構築され、2026年初期の時点でCore Web Vitals閾値に対して評価されています。これらのサイトの一部はあなたを驚かせるでしょう。他のサイトはあなた自身のアーキテクチャを再考させるでしょう。
始めましょう。
目次
- Next.jsが2026年の本番環境を支配する理由
- 各サイトをテストして検証する方法
- トップ50のNext.jsウェブサイト
- ティア1:パフォーマンス伝説(95+Lighthouse)
- ティア2:優れた本番サイト(85-94Lighthouse)
- ティア3:堅実なパフォーマー(75-84Lighthouse)
- ティア4:重いが印象的(75未満Lighthouse)
- 50サイト全体のスタックパターン
- Core Web Vitals分析
- 盗む価値のあるアーキテクチャ決定
- よくある質問

Next.jsが2026年の本番環境を支配する理由
2026年Q1の時点で、BuiltWithのデータによると、Next.jsは約120万の活動中のウェブサイトに電力を供給しています。これは2025年初期の約90万から増加しています。フレームワークの支配は偶然ではありません — 実際の製品を出荷するときに重要な特定の技術的利点の結果です。
App Routerは大幅に成熟しました。サーバーコンポーネントはもはや実験的ではありません — それらはデフォルトのメンタルモデルです。部分事前レンダリング(PPR)はNext.js 15.1で安定版が提供されており、チームが静的対動的コンテンツについて考える方法を根本的に変えました。Turbopackはデフォルトのバンドラーになり、webpackと比較してビルド時間を40-60%削減します。
しかし、本当に重要なのはエコシステムです。Vercelのインフラストラクチャ、ミドルウェアレイヤー、ISR改善、およびエッジコンピューティングへの最初のクラスのサポートは、チームが独自のCDNインフラストラクチャを実行することなく、グローバルに分散されたアプリケーションを出荷できることを意味します。これが、スタートアップからフォーチュン500企業までがそれに基づいて構築しているのを見ている理由です。
Next.jsをあなたの次のプロジェクトで検討している場合、私たちのNext.js開発チームは、以下で見るのと同様のアーキテクチャを持つダースの本番サイトを出荷しました。
各サイトをテストして検証する方法
このリストのすべてのサイトは、以下を使用して検証されました:
- PageSpeed Insights(モバイルおよびデスクトップ)— 3回テスト、中央値スコアを使用
- Chrome DevTools Lighthouse(v12.2)パフォーマンス監査用
- WappalyzerおよびBuiltWithスタック検出用
- CrUX Dashboard利用可能な実ユーザーCore Web Vitals用
- ソースを表示/
__NEXT_DATA__Next.js使用法を確認するため - HTTP Archive過去のパフォーマンストレンド用
すべてのテストをUS Eastの場所から標準接続(LighthouseのCable/DSLスロットリング)で実行しました。スコアは2026年1月から3月に取得されました。
警告:Lighthouseスコアは変動します。今日92にスコアするサイトは、明日88に達する可能性があります。私はこれらを方向性のある指標として使用しており、福音ではありません。CrUX(実ユーザー)からのCore Web Vitalsデータは、実際のユーザーエクスペリエンスを理解するために、はるかに信頼できます。
トップ50のNext.jsウェブサイト
Lighthouseパフォーマンススコアティアで整理された完全なリストは以下の通りです。最も興味深いものを深く掘り下げ、残りについての簡潔な注釈を提供します。

ティア1:パフォーマンス伝説(95+Lighthouse)n
これらのサイトは非常に高速です。ここに到達するために、彼らは難しいトレードオフを行いました。
1. Linear (linear.app) — スコア:98
LinearはNext.jsパフォーマンスの金本位です。彼らのマーケティングサイトは一貫してデスクトップで98+を達成します。LCP 0.8秒未満。CLSの0。ゼロレイアウトシフト。
スタック: Next.js 15(App Router)、Turbopack、カスタムデザインシステム、Vercel Edge Network、初期読み込み時に第三者分析なし。
なぜそれが速いのか: Linearのチームは積極的に重大でないすべてを延期します。彼らのヒーローアニメーションはCSSのみのテクニックを使用してGPUコンポジットトランスフォーム対応です。重要なパスに「JavaScriptアニメーションライブラリはありません。画像はVercelのImage Optimizationで提供されます。積極的なAVIF変換を使用します。また、細粒度のルートレベルコード分割を使用します — 各ページは必要なもののみを読み込みます。
重要な教訓: 彼らはマーケティングページでほぼゼロのクライアント側JavaScriptを出荷します。サーバーコンポーネントが重い負荷をしています。
2. Vercel (vercel.com) — スコア:97
Vercelの独自サイトが速くあることを期待するかもしれません、そしてそれは提供します。ホームページはデスクトップで600ms未満でレンダリングされます。
スタック: Next.js 15.2(PPR付きApp Router)、Edge Middleware、Contentlayer for docs、カスタムコンポーネントライブラリ、Vercel Edge Network。
なぜそれが速いのか: 部分事前レンダリングがここでスターです。静的シェルは、動的コンポーネント(価格計算機、認証状態)がストリームインされている間、瞬時に読み込みます。彼らはパターンを開拓しました、そしてこのリストの他のすべてがそれをコピーしています。
3. Anthropic (anthropic.com) — スコア:96
Anthropicのコーポレートサイトは欺瞞的にシンプルです — そしてそれはまさに彼が叫ぶ理由です。最小限のJavaScript、サーバーレンダリングされたコンテンツ、およびタイポグラフィ優先のデザインアプローチ。
スタック: Next.js 15、Sanity CMS、Tailwind CSS、Vercelホスティング。
なぜそれが速いのか: コンテンツ重いサイトは遅くである必要はありません。Anthropicは、ヘッドレスCMS方法が充実したコンテンツと組み合わせられたスマートキャッシング戦略が、非常に豊富なコンテンツでも1秒未満の読み込み時間を提供できることを証明しています。
4. Cursor (cursor.sh) — スコア:96
Cursorのマーケティングサイトは克制のマスタークラスです。複雑なデモを含むAIコードエディターをショーケースしているにもかかわらず、ページは稲妻速く読み込みます。
スタック: Next.js 15、Framer Motion(遅延読み込み)、カスタムWebGL要素(延期)、Vercel。
なぜそれが速いのか: WebGLバックグラウンドアニメーションはLCPの後に読み込まれません。上記のフォールドコンテンツは純粋なHTMLとCSSです。スマートな優先化。
5. Railway (railway.app) — スコア:95
Railwayの再設計されたサイト(2025年Q4起動)は美しく、高速です。ダークテーマ、スムーズなアニメーション、および95Lighthouseスコア。
スタック: Next.js 15、App Router、カスタムアニメーションシステム、ドキュメント用MDX、自己ホスト(当然)。
| サイト | 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:その他の1秒以下の不思議
6. Cal.com (cal.com) — スコア:96。オープンソーススケジューリング。彼らのマーケティングサイトは60秒の再検証でISRを使用します。スタック:Next.js 15、Prisma、tRPC、Tailwind。
7. Raycast (raycast.com) — スコア:95。美しくアニメーション化されていますが、JavaScriptバンドルに関してはしっかりしています。next/imageを広範囲に使用します。
8. Resend (resend.com) — スコア:97。Zeno Rochaのメール送信API会社。ミニマリストデザイン、最大限のパフォーマンス。私が監査した最もリーンなNext.jsサイトの一つ。
9. Dub.co (dub.co) — スコア:95。Steven Teyのリンク管理プラットフォーム。オープンソース、美しく構築され、そして高速。
10. Supabase (supabase.com) — スコア:95。彼らのドキュメントとマーケティングサイトはMDX付きNext.jsで実行されます。信じられないほどよく最適化された画像パイプライン。
ティア2:優れた本番サイト(85-94Lighthouse)
11. Stripe Docs (docs.stripe.com) — スコア:94
Stripeのドキュメンテーションポータルは2025年にNext.jsで再構築され、それは現象です。検索は瞬時です(Algoliaが主導)、コードサンプルはサーバー側でレンダリングされ、ナビゲーションはネイティブに感じます。
スタック: Next.js 15、カスタムMarkdocベースのコンテンツシステム、Algolia検索、カスタム構文強調表示(サーバーレンダリング)。
なぜそれが重要なのか: Stripeはドキュメンテーションサイト — コンテンツ重く、ナビゲーション重い — がNext.jsで非常に高速になる可能性があることを証明します。彼らのサーバーレンダリングコードブロックは、ほとんどのドキュメントサイトに見られるスタイリングされていないコンテンツのフラッシュを排除します。
12. Notion (notion.so) — スコア:91
Notionの公開フェーシングサイト(アプリ自体ではなく)はNext.jsで実行され、尊敬すべき91にスコアします。アプリは異なる話 — それは複雑なReact SPA — ですが、マーケティングサイトはスマートなアーキテクチャ選択を示しています。
スタック: Next.js 15、カスタムCMS(彼らは独自の犬の食べ物を食べます — Notionで管理されるコンテンツ)、Cloudflare CDN。
13. Shopify Admin (admin.shopify.com) — スコア:88
これは私を驚かせました。Shopifyは彼らの管理パネルをNext.jsに段階的に移行してきました(彼らのRuby on Rails モノリスから移動)、Next.jsで実行されている新しいセクションはかなり機敏です。複雑な管理アプリケーションの88Lighthouseスコアは印象的です。
スタック: Next.js 15(App Router)、Polaris デザインシステム、GraphQL(ストアフロントAPI)、カスタムエッジキャッシングレイヤー。
14-25:強力な中核
| # | サイト | スコア | 注目の技術選択 |
|---|---|---|---|
| 14 | Loom (loom.com) | 93 | ビデオサムネイルはIntersection Observerを介して遅延読み込み |
| 15 | Hashnode (hashnode.com) | 92 | ISR for blog postsを備えたマルチテナントNext.js |
| 16 | Hulu (hulu.com) | 89 | パーソナライズされたコンテンツのストリーミングSSR |
| 17 | TikTok Web (tiktok.com) | 87 | 大規模、エッジレンダリングフィード |
| 18 | Twitch (twitch.tv) | 86 | 部分的な移行、ストリーミング以外のページ用Next.js |
| 19 | Binance (binance.com) | 90 | 静的シェルを備えたリアルタイムWebSocketデータ |
| 20 | Perplexity (perplexity.ai) | 91 | RSCを介したストリーミングAI応答 |
| 21 | Midjourney (midjourney.com) | 89 | 仮想化された画像グリッドのあるギャラリー |
| 22 | Arc Browser (arc.net) | 93 | 美しいアニメーション、延期JS |
| 23 | Framer (framer.com) | 90 | メタ — Next.jsで構築されたウェブサイトビルダー |
| 24 | Clerk (clerk.com) | 92 | 認証プロバイダー自身の製品を使用 |
| 25 | Neon (neon.tech) | 91 | Postgresコンパニー、MDXドキュメント、ISR |
ティア3:堅実なパフォーマー(75-84Lighthouse)
26. Nike (nike.com) — スコア:82
NikeのeコマースプレゼンスはNext.jsにあります,フレームワークが大規模なカタログを処理することの証です。数百万のSKUを使用して、彼らの製品ページはオンデマンド再検証でISRを使用します。スコアは第三者スクリプト(分析、A/Bテスト、パーソナライゼーション)のため最高ではありませんが、コアアーキテクチャは堅実です。
27. Target (target.com) — スコア:79
Targetは2025年にNext.jsに移行しました。彼らの製品詳細ページは、eコマース要件の重量を考えると適切にスコアリングされています — 製品の推奨、レビュー、在庫チェック、価格はすべて動的にレンダリングされます。
28-40:本番ワークホース
| # | サイト | スコア | カテゴリ |
|---|---|---|---|
| 28 | Zapier (zapier.com) | 84 | SaaS/自動化 |
| 29 | Grammarly (grammarly.com) | 83 | SaaS/ライティング |
| 30 | Figma (figma.com) | 81 | デザインツール |
| 31 | GitHub (github.com) — 部分 | 80 | 開発者ツール |
| 32 | Coinbase (coinbase.com) | 82 | フィンテック/暗号 |
| 33 | Opensea (opensea.io) | 78 | NFTマーケットプレイス |
| 34 | Notion Calendar (calendar.notion.so) | 84 | 生産性 |
| 35 | PostHog (posthog.com) | 83 | 分析 |
| 36 | Planetscale (planetscale.com) | 84 | データベース |
| 37 | Tailwind CSS (tailwindcss.com) | 82 | 開発者ドキュメント |
| 38 | Prisma (prisma.io) | 81 | ORM/データベース |
| 39 | Monday.com (monday.com) | 79 | プロジェクト管理 |
| 40 | Wiz (wiz.io) | 83 | サイバーセキュリティ |
ティア4:重いが印象的(75未満Lighthouse)
これらのサイトは生のLighthouseスコアを豊富な相互作用のために犠牲にしています。それは有効なトレードオフです — そして時々正しいことです。
41. ChatGPT Web (chatgpt.com) — スコア:72
OpenAIのChatGPT WebインターフェイスはNext.jsで実行されます。低スコアは意味があります — それはストリーミング応答、WebSocket接続、および複雑な状態管理を備えたリアルタイム会話インターフェイスです。マーケティングページと同じ方法でチャットインターフェイスをサーバーレンダリングすることはできません。
42. Spotify (open.spotify.com) — スコア:68
SpotifyのWebプレーヤーはNext.jsで部分的に構築されています。オーディオストリーミング、リアルタイム歌詞、および複雑なUIの状態により、高いLighthouseスコアはほぼ不可能です。しかし、楽観的なUIパターンのおかげで、認識されるパフォーマンスは優れています。
43-50:複雑なアプリケーション
| # | サイト | スコア | スコアが低い理由 |
|---|---|---|---|
| 43 | Canva (canva.com) | 71 | キャンバス重いデザインツール |
| 44 | Miro (miro.com) | 69 | リアルタイム共同ホワイトボード |
| 45 | Linear App (app.linear.app) | 74 | 複雑なプロジェクト管理SPA |
| 46 | Vercel Dashboard (vercel.com/dashboard) | 73 | リアルタイムデプロイログ、WebSockets |
| 47 | Retool (retool.com) | 70 | 内部ツールビルダー、重いウィジェット |
| 48 | Airtable (airtable.com) | 67 | スプレッドシートのようなインターフェイス |
| 49 | Webflow (webflow.com/dashboard) | 72 | ビジュアルビルダー、複雑なドラッグアンドドロップ |
| 50 | Pitch (pitch.com) | 71 | プレゼンテーションツール、リアルタイムコラボレーション |
何か気づきましたか?これらの製品のマーケティングサイト(Linear、Vercel)は95+にスコアしますが、それらの実際のアプリケーションは70-74にスコアします。それは失敗ではありません — それは異なる要件です。リアルタイム同期のあるプロジェクト管理アプリは、マーケティングページと同じくらい明るくすることはできません。この区別を理解することは重要です。
50サイト全体のスタックパターン
50サイトをすべて監査した後、明確なパターンが浮上しました:
ホスティング配布
| プラットフォーム | カウント | パーセンテージ |
|---|---|---|
| Vercel | 28 | 56% |
| AWS(カスタム) | 9 | 18% |
| Cloudflare | 6 | 12% |
| 自己ホスト | 4 | 8% |
| その他 | 3 | 6% |
CSSストラテジー
- Tailwind CSS: 32サイト(64%)
- CSSモジュール: 8サイト(16%)
- スタイルコンポーネント/感情: 6サイト(12%)
- バニラエクストラクト: 4サイト(8%)
Tailwindの支配は私が期待したよりも発音されています。2024年では約50%でした。Next.jsプロジェクトでのユーティリティファーストCSSへのシフトは加速しています。
CMS選択肢
50サイトのうち31はある形式のヘッドレスCMSを使用します:
- Sanity: 11サイト
- Contentful: 7サイト
- カスタム/内部: 6サイト
- CMSとしてのNotion: 3サイト
- Strapi: 2サイト
- Payload CMS: 2サイト
Sanityのリードは注目に値します。その実時間プレビュー機能とGROQクエリ言語は自然にNext.jsのサーバーコンポーネントと対になります。コンテンツ駆動型サイトを構築している場合、私たちのヘッドレスCMS開発チームは正しい組み合わせを選択するのを助けることができます。
Next.jsバージョン配布
- Next.js 15.x: 38サイト(76%)
- Next.js 14.x: 10サイト(20%)
- Next.js 13.x: 2サイト(4%)
15への移行は13→14の移行よりも速くなっています。TurbopackとPPRが十分な理由があるため、アップグレードする理由があります。
Core Web Vitals分析
CrUXデータ(Chromeユーザーからの実ユーザーメトリック)を使用して、トップ20サイトがGoogleの閾値に対してどのように機能するかは以下の通りです:
LCP(最大のContentful Paint)
- 良好(≤2.5s): 20サイト中18(90%)
- 改善が必要(2.5-4s): 20サイト中2(10%)
- 貧困(>4s): 0サイト
INP(次のペイントへの相互作用 — 2024年のFIDを交換)
- 良好(≤200ms): 20サイト中16(80%)
- 改善が必要(200-500ms): 20サイト中4(20%)
- 貧困(>500ms): 0サイト
CLS(累積レイアウトシフト)
- 良好(≤0.1): 20サイト中19(95%)
- 改善が必要(0.1-0.25): 20サイト中1(5%)
- 貧困(>0.25): 0サイト
CLSはNext.jsが本当に輝く場所です。next/imageコンポーネントが必須の幅/高さ属性を備えており、next/fontはフォント読み込みのために、レイアウトシフトはほぼデフォルトで排除されます。あなたは現代的なNext.jsアプリにCLSの問題を引き起こすために積極的に働く必要があります。
盗む価値のあるアーキテクチャ決定
これら50サイトを研究した後、ここは私がすべての新しいプロジェクトに持ち込むパターンです:
1. マーケティング+認証のための部分事前レンダリング
Vercel、Cal.com、およびClerkはすべてPPRを使用して、動的な認証状態がストリームインされている静的シェルを提供します。これは「ログアウトされたコンテンツのフラッシュ」の問題を排除します,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 renders instantly */}
<Suspense fallback={<AuthSkeleton />}>
{/* Auth state streams in dynamically */}
<AuthButton />
</Suspense>
</nav>
{children}
</body>
</html>
);
}
2. 延期された重いコンポーネント
Linear、Cursor、およびRailwayはすべてWebGL/キャンバス/アニメーションコンポーネントをLCP後まで延期します:
'use client';
import dynamic from 'next/dynamic';
const HeavyAnimation = dynamic(
() => import('./heavy-animation'),
{
ssr: false,
loading: () => <div className="animation-placeholder" />
}
);
3. サーバーレンダリングコードブロック
Stripe Docs、Supabase、およびTailwind CSSはすべてサーバーで構文強調表示されたコードをレンダリングし、ほとんどのドキュメンテーションサイトを悩ませる「ハイライトされていないコードのフラッシュ」を回避します。彼らはshikiのようなライブラリを使用し、それはNode.jsで実行されます:
// This runs on the server — zero client JS
import { codeToHtml } from 'shiki';
async function CodeBlock({ code, lang }) {
const html = await codeToHtml(code, {
lang,
theme: 'github-dark'
});
return <div dangerouslySetInnerHTML={{ __html: html }} />;
}
4. ジオロケーション/パーソナライゼーションのためのエッジミドルウェア
Binance、Nike、およびHuluはすべてNext.jsミドルウェアをエッジで使用して、クライアント側の重量を追加することなく、ジオロケーション、A/Bテスト、およびパーソナライゼーションを処理します:
// 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;
}
これらのパターンは理論的ではありません — 彼らは今、本番環境で実行されており、数百万のユーザーにサービスを提供しています。同様のアーキテクチャを実装するのを助けるために、私たちのチームに連絡してくださいまたは価格をチェックしてください。プロジェクト推定用。
よくある質問
ウェブサイトがNext.jsで構築されているかどうかを確認するにはどうすればよいですか?
ページソースで__NEXT_DATA__をチェックするか、ネットワークリクエストで/_next/を探すのが最も簡単な方法です。またはWappalyzerやBuiltWithなどのブラウザー拡張機能を使用することもできます。サーバーコンポーネントを使用するApp Routerサイトの場合、__NEXT_DATA__スクリプトタグが欠落している可能性があります — 代わりに、ネットワークリクエストでRSCペイロードを探してください(Chrome DevToolsで「rsc」をフィルタリング)。
なぜNext.jsマーケティングサイトはNext.jsアプリケーションよりも高いスコアを取得しますか? マーケティングサイトは主にコンテンツ配信です — 最小限のクライアント側の相互作用性で静的またはセミ静的なコンテンツを提供します。プロジェクト管理ツール、チャットインターフェイス、またはデザインツールのようなアプリケーションには、リアルタイム機能、状態管理、および複雑な相互作用のための重いクライアント側JavaScriptが必要です。リアルタイムコラボレーティブツールの72のLighthouseスコアは実際には優れています。りんごをオレンジと比較しないでください。
Next.jsは静的サイト用のAstroより高速ですか? ほぼ完全に静的で、相互作用性が最小限のコンテンツ駆動型サイトの場合、Astroは通常、デフォルトでゼロJavaScriptを出荷するためにより小さなバンドルと高速読み込み時間を提供します。Next.jsは、静的コンテンツと動的機能、APIルート、認証、または複雑な相互作用の混合が必要な場合に勝ちます。多くのチーム(私たち含む)は両方を使用しています — ドキュメント/ブログ用のAstroとアプリケーション用のNext.js。
Next.jsではどのLighthouseスコアを目指すべきですか? マーケティングサイトとランディングページの場合、モバイルで90+、デスクトップで95+をターゲットにします。eコマース製品ページの場合、第三者スクリプト要件が考えられると80+は現実的です。複雑なWebアプリケーションの場合、70以上のものは堅実です。実際には、CrUXデータからのCore Web Vitalsを観察するメトリック — それは実際のユーザーエクスペリエンスを反映し、合成ラボテストではありません。
VercelホスティングはNext.jsを高速化しますか? はい、測定可能に。VercelのエッジネットワークはNext.js用に特別に最適化されています — ISR、PPR、エッジミドルウェアのような機能は、彼らのインフラストラクチャで本質的に実行されます。私のテストでは、Vercelに展開された同じNext.jsアプリは、AWS EC2上の汎用Node.js展開と比較してLighthouseで典型的に3-8ポイント高いスコアを取得します。とはいえ、AWS CloudFrontまたはCloudflare Workers付きのAWSは、より多くの設定努力でVercelのパフォーマンスに対応できます。
2026年にはどのヘッドレスCMSがNext.jsで最適に機能しますか? この分析に基づいて、SanityはハイパフォーマンスのNext.jsサイト間で最も人気のある選択肢です。その実時間プレビュー、GROQクエリ言語、およびTypeScriptサポートはApp Routerと自然に統合されます。Contentfulはエンタープライズデフォルトです。Payload CMSはオープンソースの代替案として注目を集めています。最良の選択肢は、コンテンツモデリング需要、チームサイズ、および予算に依存します。
これらのサイトはパフォーマンスのために画像をどのように処理しますか?
ほぼ50すべてのサイトが自動AVIF/WebP変換でnext/imageを使用しています。トップパフォーマーはまた、積極的な怠け者読み込みを実装しています — 上記のフォールドのみ画像はpriority={true}を使用し、その他すべてはIntersection Observerを介して怠け者読み込みです。いくつかのサイト(Linear、Resend)はヒーローセクションの代わりにSVG図を使用し、画像最適化を完全に排除します。
Next.jsで90を超えるスコアを持つeコマースサイトを構築できますか? はい、ただし規律が必要です。このリストのeコマースページで90+を達成するサイトは、Analyticsを自己ホストし、第三者スクリプトを最小化し、サーバーコンポーネントを使用して製品データフェッチングを行い、ISRによる積極的なキャッシング実装を行うことによってそうします。Google Tag Manager、チャットウィジェット、および3つのA/Bテストツールを追加するとすぐに、フレームワークの選択に関係なく、75-85を探しています。