Next.js のデフォルトとしてのパフォーマンス

Next.js は React アプリのさまざまな最適化を処理するので、

フセイン ジルデ

Next.js は、さまざまなパフォーマンス最適化が組み込まれた独自の React フレームワークです。このフレームワークを支える主な考え方は、こうした機能をデフォルトで組み込むことで、アプリの起動とパフォーマンスを可能な限り高めることです。

ここでは、フレームワークの多くの機能の概要について簡単に説明します。このコレクションの他のガイドでは、機能について詳しく説明します。

学習内容

Next.js では、デフォルトでさまざまなパフォーマンス最適化が提供されていますが、これらのガイドではそれらについて詳しく説明し、それらを使用して高速でパフォーマンスに優れたエクスペリエンスを構築する方法を紹介します。

React サイトには、Next.js で構築したアプリケーションでも機能する一般的な最適化手法が多数あります。Next.js が提供する機能に主眼を置いているため ここでは取り上げませんReact の一般的な最適化について詳しくは、React コレクションをご覧ください。

Next.js と React の違い

React は、コンポーネント ベースのアプローチでユーザー インターフェースを簡単に構築できるようにするライブラリです。React は強力ですが、特に UI ライブラリです。多くのデベロッパーは、完全なビルド ツールチェーンを実現するために、モジュール バンドラ（webpack など）やトランスパイラ（Babel など）などの追加ツールが組み込まれています。

React コレクションでは、Create React App（CRA）を使用して React アプリをすばやくスピンアップするアプローチを採用しました。CRA を使用すると、1 つのコマンドで完全なビルド ツールチェーンを提供するため、React アプリケーションを設定する手間が省けます。

CRA にはデフォルトの最適化がいくつか組み込まれていますが、このツールはシンプルでわかりやすい設定を提供することを目的としています。構成を取り出して変更するかどうかは、デベロッパー自身が決定できます。

新しい React アプリケーションの作成にも使用できる Next.js は、異なるアプローチを採用しています。多くのデベロッパーが望んでいるものの、設定が難しい一般的な最適化をすぐに利用できます。たとえば、次のような最適化です。

  • サーバーサイド レンダリング
  • 自動コード分割
  • ルートのプリフェッチ
  • ファイル システムのルーティング
  • CSS-in-JS スタイル設定（styled-jsx）

セットアップ

次のコマンドを実行して、新しい Next.js アプリケーションを作成します。

npx create-next-app new-app

次に、ディレクトリに移動して開発用サーバーを起動します。

cd new-app
npm run dev

次の埋め込みは、新しい Next.js アプリのディレクトリ構造を示しています。

  • [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
  • サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 全画面表示 を押します。

pages/ ディレクトリが 1 つのファイル（index.jsx）で作成されていることがわかります。Next.js は、このディレクトリ内のすべてのページが個別のルートとして提供される、ファイル システム ルーティングのアプローチに従います。このディレクトリに新しいファイル（about.js など）を作成すると、新しいルート（/about）が自動的に作成されます。

コンポーネントは、他の React アプリケーションと同様に作成して使用することもできます。単一のコンポーネント nav.js で components/ ディレクトリがすでに作成され、index.js にインポートされています。デフォルトでは、Next.js で使用されるすべてのインポートは、そのページが読み込まれた場合にのみ取得されるため、コードの自動分割のメリットが得られます。

さらに、Next.js では、すべての最初のページ読み込みがサーバー側でレンダリングされます。DevTools で [ネットワーク] パネルを開くと、ドキュメントの最初のリクエストでサーバーが完全にレンダリングされたページが返されることを確認できます。

[Network] パネルの [Preview] タブには、ページのリクエスト時に Next.js が視覚的に完全な HTML を返すことが表示されています。
[Network] パネルの [Preview] タブには、ページがリクエストされたときに、Next.js が視覚的に完全な HTML を返すことが示されています。

これらは、Next.js によって自動的に提供される多くの機能のほんの一部です。その多くはカスタマイズ可能で、さまざまなユースケースに合わせて変更できます。

次のステップ

ダジャレを言ったよ 🎄?

このコレクションの各ガイドでは、Next.js の特定の機能について詳しく説明します。