Next.js アプリケーションのパフォーマンスの最適化: ヒントとベスト プラクティス

Next.js は、React アプリケーションを構築するための最も人気のあるフレームワークの 1 つになりました。サーバーサイド レンダリング (SSR)、静的サイト生成 (SSG)、API ルートなどの強力な機能により、高速でスケーラブルな Web アプリケーションを構築する場合に最適です。ただし、他の Web フレームワークと同様に、優れたユーザー エクスペリエンスを提供するにはパフォーマンスの最適化が重要です。この記事では、Next.js アプリケーションを最適化するためのヒントとベスト プラクティスについて説明します。

1.可能な限り静的サイト生成 (SSG) を使用します
Next.js の最も強力な機能の 1 つは静的サイト生成 (SSG) で、ビルド時にページを事前レンダリングできます。これにより、コンテンツが CDN から直接提供されるため、読み込み時間が短縮され、SEO パフォーマンスが向上します。

SSG を使用する場合: ブログや製品のランディング ページなど、頻繁に変更されないページやリアルタイム データを必要とするページに最適です。
実装方法: getStaticProps を使用してビルド時にデータを取得し、ページを事前レンダリングします。

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then((res) => res.json());
  return { props: { data } };
}

2.増分静的再生 (ISR) を活用する
頻繁な更新が必要でも静的生成のメリットが得られるページの場合、増分静的再生成 (ISR) を使用すると、古いコンテンツをユーザーに提供しながらバックグラウンドでページを再生成できます。

ISR を使用する場合: 頻繁に更新されるが、リクエストごとに動的に生成する必要がないコンテンツ (ニュース記事、ブログ投稿、製品カタログなど) を含むページに最適です。
実装方法: getStaticProps を revalidate オプションとともに使用して、ページ再生成の頻度を指定します。

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then((res) => res.json());
  return {
    props: { data },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

3. Next.js 画像コンポーネント
を使用して画像を最適化する Next.js には、next/image コンポーネントによる画像の最適化が組み込まれています。画像のサイズ変更、遅延読み込み、WebP などの最新形式での提供によって画像を自動的に最適化し、パフォーマンスを向上させます。

実装方法: コンポーネントを使用して、自動最適化で画像を読み込みます。

import Image from 'next/image';

const MyComponent = () => (
  <image src="/image.jpg" alt="Next.js アプリケーションのパフォーマンスの最適化: ヒントとベスト プラクティス" width="{500}" height="{300}"></image>
);

利点: これにより、全体的な画像サイズが削減され、読み込み時間が短縮され、さまざまなデバイスに適切な画像サイズが自動的に提供されます。

4.コード分​​割を実装する
Next.js はコードを自動的に小さなチャンクに分割しますが、動的インポートを利用して、必要な場合にのみコンポーネントやライブラリを読み込むこともできます。これにより、初期の JavaScript ペイロードが軽減され、ページの読み込みが高速化されます。

使用する場合: すぐに必要ではない大規模なコンポーネントまたはサードパーティのライブラリの場合。
実装方法: next/dynamic を使用してコンポーネントを動的に読み込みます。

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then((res) => res.json());
  return { props: { data } };
}

5.サーバー側キャッシュを有効にする
キャッシュにより、動的アプリケーションのパフォーマンスが大幅に向上します。サーバーサイド レンダリング (SSR) ページの場合、応答をキャッシュするとサーバーの負荷が軽減され、応答時間が短縮されます。

実装方法: キャッシュ ヘッダーまたは Vercel の Edge Functions などのキャッシュ ソリューションを使用して、SSR ページと API 応答をキャッシュします。

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').then((res) => res.json());
  return {
    props: { data },
    revalidate: 60, // Regenerate the page every 60 seconds
  };
}

6. JavaScript と CSS バンドルを最適化する
大規模な JavaScript および CSS バンドルにより、アプリケーションの読み込み時間が遅くなる可能性があります。 Next.js は、これらのアセットを最適化するいくつかの方法を提供します。

ツリーシェイキング: Next.js は、ビルドプロセス中に未使用のコードを自動的に削除します。
CSS モジュール: CSS モジュールまたはスタイル付きコンポーネントを使用して CSS の範囲を設定し、不要なスタイルが読み込まれるのを防ぎます。
コード分​​割: 前述のように、必要な場合にのみ重いライブラリを動的にインポートします。

7.プリフェッチを使用してナビゲーションを高速化します
Next.js は、リンクされたページをユーザーがクリックする前にバックグラウンドでプリロードする、すぐに使えるリンクのプリフェッチをサポートしています。これにより、データの取得と新しいコンテンツのレンダリングにかかる​​時間が短縮され、ページ間のナビゲーションが高速化されます。

実装方法: Next.js のコンポーネントは、ページがビューポート内にあるときに自動的にページをプリフェッチします。

import Image from 'next/image';

const MyComponent = () => (
  <image src="/image.jpg" alt="Next.js アプリケーションのパフォーマンスの最適化: ヒントとベスト プラクティス" width="{500}" height="{300}"></image>
);

8. Web Vitals をパフォーマンス監視に使用する
Web Vitals は、現実世界のユーザー エクスペリエンスを測定する一連の指標です。 Next.js には、これらのメトリクスを監視するためのサポートが組み込まれており、パフォーマンスを追跡し、改善すべき領域を特定するのに役立ちます。

実装方法: Next.js の next/web-vitals を使用して、LCP (最大コンテンツフル ペイント)、FID (初回入力遅延)、CLS (累積レイアウト シフト) などのパフォーマンス メトリックを監視します。

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));

const Page = () => (
  <div>
    <h1>Welcome to the page!</h1>
    <dynamiccomponent></dynamiccomponent>
  </div>
);

9.サードパーティのスクリプトを最小限に抑える
サードパーティのスクリプトは、特に最適化されていない場合、アプリケーションの速度を低下させる可能性があります。必ず次のことを行ってください:

必要に応じてサードパーティのスクリプトを遅延読み込みします。
不要なスクリプトを削除して、ページに読み込まれる JavaScript の量を減らします。
サードパーティのスクリプトを埋め込む代わりに、静的コンテンツや API を使用するなどの代替手段を検討してください。

10. HTTP/2 とサーバープッシュの活用
HTTP/2 をサポートするサーバー上で Next.js アプリケーションをホストしている場合は、サーバー プッシュを利用して、クライアントがリクエストする前に複数のリソース (スクリプトやスタイルシートなど) をクライアントに送信できます。これにより、重要なリソースの読み込みが高速化されます。

結論
Next.js アプリケーションのパフォーマンスの最適化は、静的サイト生成の活用から JavaScript や画像配信の最適化まで、複数の戦略を含む継続的なプロセスです。これらのヒントとベスト プラクティスに従うことで、Web アプリケーションの速度、効率、ユーザー エクスペリエンスを大幅に向上させることができます。パフォーマンス指標を定期的にテストおよび監視して、アプリの高速性と応答性を確保します。

以上がNext.js アプリケーションのパフォーマンスの最適化: ヒントとベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。