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/
ディレクトリが作成され、そこに index.jsx
という単一のファイルが作成されていることに注意してください。Next.js はファイル システム ルーティング アプローチに従い、このディレクトリ内のすべてのページが個別のルートとして提供されます。このディレクトリに about.js
などの新しいファイルを作成すると、新しいルート(/about
)が自動的に作成されます。
コンポーネントは、他の React アプリケーションと同様に作成して使用することもできます。components/
ディレクトリはすでに作成されており、単一のコンポーネント nav.js
が含まれています。このコンポーネントは index.js
にすでにインポートされています。デフォルトでは、Next.js で使用されるすべてのインポートは、そのページが読み込まれたときにのみ取得されるため、自動コード分割のメリットが得られます。
さらに、Next.js では、最初のページ読み込みはすべてサーバーサイド レンダリングされます。DevTools で [Network] パネルを開くと、ドキュメントの最初のリクエストが完全にサーバー レンダリングされたページを返していることがわかります。
これらは、Next.js によって自動的に提供される多くの機能のほんの一部です。多くの機能はカスタマイズ可能で、さまざまなユースケースに合わせて変更できます。
次のステップ
ダジャレです 😛?
このコレクションの他のガイドでは、特定の Next.js 機能について詳しく説明します。
- ルートのプリフェッチによるページ ナビゲーションの高速化
- ハイブリッド ページと AMP 専用ページの配信: 検索エンジンからの読み込みを高速化
- 動的インポートによるコード分割コンポーネント: JavaScript のフットプリントを削減