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

Next.js は React アプリの多くの最適化を自動的に処理するため、開発者が行う必要はありません。

Houssein Djirdeh

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 にはデフォルトの最適化がいくつか組み込まれていますが、このツールはシンプルでわかりやすい設定を提供することを目的としています。デベロッパーは、イジェクトして構成を自分で変更するかどうかを選択できます。

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

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

設定

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

npx create-next-app new-app

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

cd new-app
npm run dev

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

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

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

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

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

[ネットワーク] パネルの [プレビュー] タブには、ページがリクエストされたときに Next.js が視覚的に完全な HTML を返すことが示されています。
[ネットワーク] パネルの [プレビュー] タブには、ページがリクエストされたときに Next.js が視覚的に完成した HTML を返すことが示されています。

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

次のステップ

（しゃれです 😛）

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