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

新しい 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] をクリックして、プロジェクトを編集可能にします。
  • サイトをプレビューするには、[View App] を押してから、[Fullscreen] 全画面表示 を押します。

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

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

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

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

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

次のステップ

おしゃれであそぼう 👀?

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