2026年の最高のNext.jsウェブサイト50選：本番環境構築
ここ3ヶ月間、本番環境のNext.jsサイトを監査してきました。おもちゃのようなプロジェクトではありません。スターターテンプレートでもありません。数百万ユーザーにサービスを提供している実際のウェブサイト — そしてそれらのLighthouseスコアを取得し、構築の選択肢を詳しく調べ、実際に彼らを高速にしているものを文書化しました。
これは誰かがホームページをスクリーンショットして終わりにするようなリスティクルではありません。ここのすべてのサイトはPageSpeed Insightsでテストされ、WappalyzerとBuilt.withでスタック検証されて確認され、2026年初頭の時点でCore Web Vitalsの閾値に対して評価されています。これらのサイトの一部はあなたを驚かせるでしょう。他のものはあなた自身のアーキテクチャを再考させるでしょう。
さあ、始めましょう。
目次
- なぜNext.jsが2026年のプロダクションで支配しているのか
- 各サイトをテストおよび検証した方法
- トップ50のNext.jsウェブサイト
- ティア1：パフォーマンスレジェンド（95以上のLighthouse）
- ティア2：優秀なプロダクションサイト（85-94のLighthouse）
- ティア3：堅実なパフォーマー（75-84のLighthouse）
- ティア4：重たいが印象的（75未満のLighthouse）
- 50のサイト全体のスタックパターン
- Core Web Vitalsの内訳
- 盗む価値のあるアーキテクチャ決定
- FAQ
なぜNext.jsが2026年のプロダクションで支配しているのか
Next.jsは2026年Q1の時点でBuiltWithのデータによると、およそ120万のアクティブなウェブサイトを支えています。これは2025年初頭の約90万から増加しています。フレームワークの支配は偶然ではありません — 実際のプロダクトを出荷する際に問題になる特定の技術的利点の結果です。
App Routerは大きく成熟しました。Server Componentsはもはや実験的ではありません — それらはデフォルトのメンタルモデルです。Partial Prerendering（PPR）はNext.js 15.1で安定版として出荷され、チームが静的コンテンツと動的コンテンツについて考える方法を根本的に変えました。そしてTurbopackはデフォルトのバンドラーになり、webpackと比較してビルド時間を40-60%削減しました。
しかし、本当に重要なのはエコシステムです。Vercelのインフラストラクチャ、ミドルウェアレイヤー、ISRの改善、およびエッジコンピューティングの一流サポートは、チームが独自のCDNインフラストラクチャを実行せずにグローバルに分散されたアプリケーションを出荷できることを意味します。それが、スタートアップからFortune 500企業まで誰もがその上に構築している理由です。
次のプロジェクトでNext.jsを検討している場合、私たちのNext.js開発チームは、以下で見るのと同様のアーキテクチャを持つ数十のプロダクションサイトを出荷しています。
各サイトをテストおよび検証した方法
このリストのすべてのサイトは以下を使用して検証されました：
- PageSpeed Insights（モバイルおよびデスクトップ） — 3回テスト、中央値スコアを使用
- Chrome DevTools Lighthouse（v12.2）パフォーマンス監査用
- スタック検出用のWappalyzerとBuiltWith
- 利用可能な場合はCrUXダッシュボードで実際のユーザーCore Web Vitals
- **View Source /
__NEXT_DATA__**でNext.js使用を確認 - 歴史的パフォーマンストレンド用のHTTP Archive
すべてのテストはUS東から標準接続（Lighthouseのケーブル/DSLスロットリング）で実行しました。スコアは2026年1月から3月の間に取得されました。
1つの注意：Lighthouseスコアは変動します。今日92のスコアを取得しているサイトは明日88に当たるかもしれません。これらを指向性のあるインジケータとして使用していますが、福音として使用していません。CrUX（実際のユーザー）のCore Web Vitalsデータは、実際のユーザーエクスペリエンスを理解するためにはるかに信頼できます。
トップ50のNext.jsウェブサイト
ここは最も興味深いものを深掘りし、残りのものに簡単な注釈を提供するLighthouseパフォーマンススコアティアで整理された完全なリストです。
ティア1：パフォーマンスレジェンド（95以上のLighthouse）
これらのサイトはばかげたほど高速です。彼らはここに到達するために難しい決定をしました。
1. Linear（linear.app） — スコア：98
Linearは、Next.jsパフォーマンスのゴールドスタンダードです。彼らのマーケティングサイトは、Lighthouseデスクトップで一貫して98以上のスコアを取得しています。LCP 0.8秒未満。CLSが0。ゼロレイアウトシフト。
スタック： Next.js 15（App Router）、Turbopack、カスタムデザインシステム、Vercel Edge Network、初期負荷時のサードパーティ分析なし。
それが高速である理由： Linearのチームは積極的にすべての重要でないものを遅延させます。彼らのヒーロー動画はGPUコンポジットされた変換を使用したCSS専用技術を使用しています。重大なパス上にはJavaScript動画ライブラリはありません。画像はVercelのImage Optimizationを介して提供され、積極的なAVIF変換があります。彼らはまた、粒度の細かいルートレベルのコード分割を使用しています — 各ページは必要なものだけを読み込みます。
重要な取り出し： 彼らはマーケティングページでほぼゼロのクライアント側JavaScriptを出荷します。Server Componentsが重い仕事をします。
2. Vercel（vercel.com） — スコア：97
Vercelの自身のサイトが高速であることを期待するでしょう、そしてそれは提供しています。ホームページはデスクトップで600ms未満でレンダリングされます。
スタック： Next.js 15.2（PPRを備えたApp Router）、Edge Middleware、ContentlayerはドキュメントのためのContentlayer、カスタムコンポーネントライブラリ、Vercel Edge Network。
それが高速である理由： Partial Prerenderingはここでの主演です。静的シェルは瞬時に読み込まれ、動的コンポーネント（価格計算機、認証状態）がストリーミングされます。彼らはこのリストの他のすべてがコピーしているパターンをパイオニアしました。
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に起動）は、美しく高速です。ダークテーマ、スムーズなアニメーション、そして95のLighthouseスコア。
スタック： 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：より多くのサブセコンドワンダー
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サイトの1つ。
9. Dub.co（dub.co） — スコア：95。Steven Teyのリンク管理プラットフォーム。オープンソース、美しく構築され、高速です。
10. Supabase（supabase.com） — スコア：95。彼らのドキュメントとマーケティングサイトはMDXを持つNext.jsで実行されます。信じられないほどよく最適化された画像パイプライン。
ティア2：優秀なプロダクションサイト（85-94のLighthouse）
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で実行されている新しいセクションはより著しく高速です。複雑な管理アプリケーションの場合、Lighthouseスコア88は印象的です。
スタック： Next.js 15（App Router）、Polarisデザインシステム、GraphQL（Storefront API）、カスタムエッジキャッシングレイヤー。
14-25：強い中間
| # | サイト | スコア | 注目すべきテックの選択 |
|---|---|---|---|
| 14 | Loom（loom.com） | 93 | Intersection Observerを介して遅延読み込みされるビデオサムネイル |
| 15 | Hashnode（hashnode.com） | 92 | ブログ投稿のISRを備えたマルチテナント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-84のLighthouse）
26. Nike（nike.com） — スコア：82
Nikeの数百万のSKUを持つeコマースでのNext.jsプレゼンスは、フレームワークが大規模なカタログを処理しているという証拠です。彼らの製品ページは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 | Fintech /暗号 |
| 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のウェブプレイヤーは部分的に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 Modules： 8サイト（16%）
- Styled Components / Emotion： 6サイト（12%）
- Vanilla Extract： 4サイト（8%）
Tailwindの優位性は期待以上です。2024年には約50%でした。Next.jsプロジェクトでのユーティリティファーストCSSへのシフトが加速しています。
CMS選択肢
50のサイトのうち、31はある形のヘッドレスCMSを使用しています：
- Sanity： 11サイト
- Contentful： 7サイト
- カスタム/内部： 6サイト
- Notion as CMS： 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（最大コンテンツフルペイント）
- 良好（≤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. マーケティング+ Authの部分的なプリレンダリング
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 />
{/* 静的シェルは瞬時にレンダリングされます */}
<Suspense fallback={<AuthSkeleton />}>
{/* 認証状態は動的にストリーミングされます */}
<AuthButton />
</Suspense>
</nav>
{children}
</body>
</html>
);
}
2. 遅延重いコンポーネント
Linear、Cursor、およびRailwayはすべてLCPの後までWebGL/キャンバス/アニメーションコンポーネントを遅延させます：
'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はすべて構文強調表示されたコードをサーバーにレンダリングしており、ほとんどのドキュメントサイトを悩ませる「強調表示されていないコードのフラッシュ」を回避しています。彼らはNode.jsで実行できるshikiのようなライブラリを使用しています：
// これはサーバーで実行されます — ゼロのクライアント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. ジオロケーション/個人化用のEdgeミドルウェア
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;
}
これらのパターンは理論的ではありません — 彼らは現在、数百万のユーザーにサービスを提供している本番環境で実行しています。同様のアーキテクチャの実装を支援したい場合は、チームに連絡してくださいまたは価格で見積もってください。
FAQ
ウェブサイトがNext.jsで構築されていることを確認するにはどうすればよいですか？
最も簡単な方法は、ページソースで__NEXT_DATA__をチェックするか、ネットワークリクエストで/_next/を探すことです。Wappalyzer、またはBuiltWithなどのブラウザ拡張機能を使用することもできます。Server Componentsを使用しているApp Routerサイトの場合、__NEXT_DATA__スクリプトタグが存在しない場合があります — 代わりに、Chrome DevToolsでネットワークリクエストのRSCペイロードを探してください（「rsc」でフィルタリング）。
Next.jsマーケティングサイトがNext.jsアプリケーションより高くスコアリングされるのはなぜですか？
マーケティングサイトは主にコンテンツ配信です — それはクライアント側のインタラクティビティが最小限の静的またはセミ静的コンテンツを提供しています。プロジェクト管理ツール、チャットインターフェイス、またはデザインツールなどのアプリケーションには、リアルタイム機能、状態管理、および複雑なインタラクション用の重いクライアント側JavaScriptが必要です。リアルタイム共同ツールの72のLighthouseスコアは実は優れています。りんごとオレンジを比較しないでください。
静的サイト用のAstroより速いNext.jsですか？
純粋に静的で、最小限のインタラクティビティを持つコンテンツ駆動サイトの場合、Astroは通常、デフォルトでゼロJavaScriptを出荷するため、より小さいバンドルと高速な読み込み時間を提供します。Next.jsは、静的コンテンツと動的機能、APIルート、認証、または複雑なインタラクティビティが必要な場合に勝ちます。多くのチーム（私たち自身を含む）の両方を使用します — ドキュメント/ブログ用Astroとアプリケーション用Next.js。
Next.jsで何のLighthouseスコアを目指すべきですか？
マーケティングサイトとランディングページの場合、モバイルで90以上、デスクトップで95以上を目指してください。eコマース製品ページの場合、サードパーティスクリプト要件を考えると80以上が現実的です。複雑なウェブアプリケーションの場合、70以上は堅実です。見るべき実際のメトリックはCrUXデータのCore Web Vitalsです — それは合成ラボテストではなく実際のユーザーエクスペリエンスを反映しています。
VercelホスティングはNext.jsをより速くしますか？
はい、測定可能にそうです。Vercelのエッジネットワークは特にNext.js用に最適化されています — ISR、PPR、およびエッジミドルウェアなどの機能はそれらのインフラストラクチャ上でネイティブに実行されます。私のテストでは、同じNext.jsアプリは、AWS EC2の汎用Node.js展開と比較してVercelに展開されたとき、Lighthouseで通常3-8ポイント高くスコアします。とはいえ、より多くの設定作業で、CloudFrontを備えたAWSまたはCloudflare Workers、Vercelのパフォーマンスに一致できます。
2026年のNext.jsで最適なヘッドレスCMSは何ですか？
この分析に基づいて、Sanityは高性能なNext.jsサイトの中で最も人気のある選択肢です。そのリアルタイムプレビュー、GROQクエリ言語、およびTypeScriptサポートはApp Routerと自然に統合されます。Contentfulはエンタープライズのデフォルトです。Payload CMSはオープンソース代替案として勢いを増しています。最適な選択肢はコンテンツモデリングのニーズ、チームサイズ、および予算に依存します。
これらのサイトはパフォーマンス用の画像をどのように処理しますか？
ほぼすべての50のサイトは、自動AVIF/WebP変換でnext/imageを使用しています。最高のパフォーマーはまた、積極的な遅延読み込みを実装します — 上記の折られた画像のみがpriority={true}を使用し、その他すべてはIntersection Observer経由で遅延読み込みされます。いくつかのサイト（Linear、Resend）はラスター画像の代わりにヒーローセクション用のSVGイラストレーションを使用し、画像最適化全体を排除しています。
90以上のスコアを取得するNext.jsでeコマースサイトを構築できますか？
はい、ですが規律が必要です。このリストのeコマースページで90以上のスコアを達成するサイトは、分析をセルフホストすることによってそうします、サードパーティスクリプトを最小化し、製品データ取得用のサーバーコンポーネントを使用し、ISRで積極的なキャッシングを実装しています。Google Tag Managerを追加し、チャットウィジェットを追加し、3つのA/Bテストツールを追加した瞬間、選択したフレームワークに関係なく75-85を見ています。