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

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

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

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

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

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

次のステップ

ダジャレです 😛?

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