Next.js と React – Web開発にいいのは？

Next.js と React は関連していますが、その目的や機能は異なります。例えば Next.js でいう React は、UI（ユーザーインターフェース）コンポーネントを構築するための基盤となるライブラリであり、Next.js は React ベースの Web アプリケーションを構築するための機能と規約が追加されたフレームワークを提供します。

ピクセルを押し込むことなく、インタラクティブなインターフェースをデザインしませんか。React ライブラリや Storybook からコード化されたコンポーネントを持ち込めば、ベクターベースのツールよりも８.６倍速く、制作可能なプロトタイプを組み立てることができます。プロトタイプからコードをコピーして、アプリで使ってみてください。こちらから UXPin Merge をぜひ無料でお試しください。

Next.js とは

Next.js はオープンソースの React フレームワークで、最近の Web アプリケーションの構築に使われています。そして SSR（サーバーサイドレンダリング）、SSG（静的サイト生成）、自動コード分割、ルーティングなどの組み込み機能を提供することで、React アプリケーションの開発プロセスをしやすくするように設計されています。

Next.js は React 上に構築されており、パフォーマンスと SEO（検索エンジン最適化）が改善された、本番環境に対応した Web アプリケーションの構築に特に適しています。また、Next.js のコンテキストでは、React は UI（ユーザーインターフェース）を構築するための基盤となるライブラリとして機能します。

Next.jsの機能

Next.jsの主な機能として次のようなものがあります：

• SSR（サーバーサイドレンダリング） – Next.js では、React コンポーネントをクライアントに送信する前にサーバー側でレンダリングすることができ、クライアント側のレンダリングは、レンダリングプロセスの多くをクライアントのブラウザに移行する。
• SSG（静的サイト生成）‐  Next.js は構築時に静的 HTML ファイルを生成でき、サーバーを必要とせずにクライアントに提供できる。 これは、動的に生成する必要のないコンテンツの多い Web サイトやページに有効。
• コードの自動分割 ‐ Next.js はコードを小さなバンドルに自動的に分割し、必要に応じて読み込む。これにより、アプリケーションの初期の読み込み時間が短縮される。
• ルーティング – Next.js は、各 React コンポーネントがルートに対応するファイルベースのルーティング システムを提供する。 これにより、複雑なルーティング構成の作成と管理がしやすくなる。
• API ルート – Next.js で、API ルートをサーバーレス関数として作成でき、それをデータのフェッチやサーバー側の操作の実行に使うことができる。
• 内蔵 CSS および Sass サポート – Next.js は、CSS または Sass を使ってアプリケーションをスタイリングするためのサポートが内蔵されていることから、一般的なスタイリング ソリューションと簡単に統合することができる。

NextJS を使うべきタイミング

特定の場合では、プレーンな React ではなく Next.js を選択した方が有利になる可能性があります。

例えば パフォーマンス、SEO、または初期ページ読み込み時間の短縮のために、アプリケーションがサーバー側でコンテンツをレンダリングする必要がある場合、Next.js はサーバー側レンダリングと静的サイト ジェネレーターの組み込みサポートを提供します。 これは、SEO が重要なコンテンツの多い Web サイトやブログ、または ECプラットフォームで特に有効です。

Next.js は、構築時やサーバー側でページを事前レンダリングし、クライアントがダウンロードして実行する必要がある JavaScript の量を削減することで、アプリケーションのパフォーマンスを上げることができます。 そしてそれによって、特に低速のデバイスやネットワーク上で、読み込み時間が短縮され、ユーザー エクスペリエンスが上がります。

また、Next.js には、自動コード分割、CSS と Sass のサポート、API ルートなど、多くの組み込み機能が付属しており、アプリケーションでこのような機能が必要だけど手動で設定したくない場合は、Next.js でその時間と労力を節約できます。

Next.js が適していない場合

Web アプリケーションのサーバー側のレンダリング、静的サイト生成、ルーティングの簡略化、パフォーマンスの向上、または内蔵機能が必要な場合は、プレーンな React よりも Next.js を検討した方がいいでしょう。 ただし、アプリケーションに高度なカスタマイズが求められる場合は、React のみを使った方が適切な場合があります。

以下のプロジェクトを構築する場合は、他のフレームワークを検討してください：

• マイクロサービスまたはバックエンドの負荷が高いアプリケーション – Next.js は主にフロントエンド アプリケーションの構築に重点を置いているため、プロジェクトに負荷の高いバックエンド ロジック、マイクロサービス アーキテクチャ、または複雑なサーバー側の処理が含まれる場合は、Express.js、Nest.js、Spring Boot など、バックエンド開発専用に設計されたフレームワークやライブラリを使った方がいい場合がある。
• リアルタイム アプリケーション – チャット アプリケーションやマルチプレイヤー ゲームなど、アプリケーションがリアルタイム更新に大きく依存している場合、Next.js は最善策ではない可能性がある。 Next.js はクライアント側の JavaScript を使ってリアルタイム更新を処理できるが、リアルタイム接続の管理や大量の同時リクエストの処理には最適化されていない。
• 高度にカスタマイズされた UI – プロジェクトで複雑なアニメーション、インタラクション、または複雑なレイアウトが求められる場合、Next.js では制限が出てくる可能性がある。 React はカスタム UI コンポーネントを構築するための柔軟な基盤を提供するが、Next.js は、高度にカスタマイズされたデザインを実装する際に、特定の規約や抽象化でその能力が制限される可能性がある。 このような場合、Webpack や UI ライブラリなどの軽量バンドラーと React を併用する方が適切な場合がある。

React とは

Reactは、UI コンポーネントの作成や、アプリケーションの状態と動作の管理に使用されるコア ライブラリです。 UI 構築のために Facebook によって開発され、２０１３年に初めてリリースされて以来、Web アプリケーションを構築するために最も広く使用されているライブラリの１つになっています。

React は、独自のロジックとステートをカプセル化する再利用可能な UI コンポーネントを作成する方法を提供します。 そしてそれによって、デベロッパーはより小さく、より管理しやすいコンポーネントを構成して複雑な UI を構築できます。

Next.js は、SSR（サーバーサイド レンダリング）や SSG（静的サイト生成 ）、ルーティングなど、Web アプリケーションを構築するための追加機能と規約を提供することにより、React に基づいて構築されています。

Reactの機能

React は、シンプルさ、パフォーマンス、再利用性に重点を置き、最新の UI を構築するための強力で柔軟な基盤を提供します。また、コンポーネントベースのアーキテクチャ、仮想 DOM、宣言構文により、あらゆる規模と複雑さの Web アプリケーションを構築するデベロッパーにとって人気の選択肢となっています。

そして、React には以下のような機能があります：

• コンポーネントベースのアーキテクチャ：React は、UI が再利用可能なコンポーネントに分割されるところであるコンポーネントベースのアーキテクチャに従っており、コンポーネントは独自のロジック、ステート、UI をカプセル化するため、複雑な UI の構築や保全がよりしやすくなる。
• 宣言型構文：React は宣言型プログラミング パラダイムを使用しており、デベロッパーは DOM を命令的に操作するのではなく、任意の時点で UI がどのように見えるかを記述することができる。 これにより、コードの理解と保全がよりしやすくなる。
• 仮想 DOM：React は仮想 DOM を利用して UI を効率的に更新する。 また、ブラウザの DOM を直接操作するのではなく、メモリ内に DOM の仮想表現を作成し、それを実際の DOM と比較する。 これにより、React は DOM 操作を最小限に抑え、パフォーマンスを上げることができる。
• 単方向データ フロー：React は、データが props を介して親コンポーネントから子コンポーネントに流れるところである単方向データフローに従う。 これにより、動作が確実に予測可能になり、データの変更がアプリケーションを通じてどのように伝播するかがわかりやすくなる。
• JSX：React は JSX (JavaScript XML) 構文を使うため、デベロッパーは JavaScript 内で HTML のようなコードを直接記述することができる。 JSX を使うと、UI コンポーネントの作成と視覚化がしやすくなるだけでなく、JavaScript  ロジックをマークアップに直接組み込むのもしやすくなる。
• フック：React ではバージョン 16.8 でフックが導入され、それでクラスコンポーネントを作成せずにステートやその他の React 機能を使用する方法を提供できる。フックを使うと、デベロッパーはコンポーネント間でのロジックの再利用や、より簡潔で読みやすいコードの作成ができる。
• コミュニティとエコシステム：React には大規模で活発なデベロッパーコミュニティがあり、その機能を拡張するライブラリ、ツール、フレームワークの広大なエコシステムがある。 これには、Redux や MobX などの状態管理や、React Router などのルーティング 、マテリアル UI や Ant Design などの UI コンポーネントなどのツールが含まれる。
• クロスプラットフォーム：React は主に Web アプリケーションの構築に使用されるが、React Native を使ってモバイル アプリケーションを構築することもできる。 また、React Native を使うと、デベロッパーは React と JavaScript を使ってモバイル アプリを作成でき、これを iOS および Android プラットフォーム用のネイティブ コードにコンパイルできる。

React のおすすめユースケース

Reactを習得すると、動的でインタラクティブな Web アプリケーションを構築するための幅広い可能性が開かれます。

React で構築できる一般的なユースケースとプロジェクトには、以下のようなものがあります：

• SPA（シングルページアプリケーション）
• PWA（プログレッシブ Web アプリ）
• CMS（コンテンツ管理システム）
• データ可視化ダッシュボード（例）
• リアルタイムのコラボレーションツール
• インタラクティブな地図と地理空間アプリケーション
• Eラーニングプラットフォーム
• ソーシャル ネットワーキング プラットフォーム
• ECサイト
• 社内ポータルサイト
• タスク管理アプリ

ここにアクセスして、Netflix などの React.js Web サイトの例をご覧ください。

Reactを使うべきでない場合

React は、レンダリングと対話性に関して JavaScript に大きく依存しています。なので、対象ユーザーに、スクリーンリーダーを使うハンディキャップのあるユーザーや JavaScript の実行が制限されている環境など、JavaScript サポートが制限されているユーザーが含まれている場合は、アクセシビリティやグレースフル デグラデーションのための代替アプローチまたはフォールバックのソリューションを検討する必要があるかもしれません。

また、Reactは静的な Web サイトに適しており、チャット アプリケーションやマルチプレイヤー ゲームなどのリアルタイム アプリケーションは、React 単独には適さない場合があります。 React はクライアント側 JavaScript を使ってリアルタイム更新を処理できますが、リアルタイム接続の管理や大量の同時リクエストの処理には最適化されていない可能性があります。 このような場合、Socket.io などのフレームワークや Firebase などのプラットフォームが、より適切なソリューションを提供できるかもしれません。

詳しくは、React の使用方法 に関するこちらの記事をお読みください。

Next.js と React の比較

Next.js はファイルベースのルーティング システムを提供するため、React Router などの追加ライブラリを使う必要がある React に比べてルーティング構成の管理がしやすくなります。 また、アプリケーションに複雑なルーティング要件がある場合、Next.js を使うとプロセスがシンプルになり、定型コードの量が削減されます。

React の機能が Next.js の機能とどのように連携するかを以下で見てみましょう：

• SSR（サーバーサイド レンダリング）：
  • React 自体には、サーバー側のレンダリング機能は内蔵されいないが、React コンポーネントはクライアント側とサーバー側の両方でレンダリングされる。 また、React の仮想 DOM では、ReactDOMServer などのライブラリを使ってコンポーネントをサーバー側でレンダリングできる。
  • React を使うと、サーバー側でコンポーネントをレンダリングできるが、サーバー側のレンダリングを手動で設定するか、SSR の複雑さを抽象化する Next.js などのライブラリを使う必要がある。

• SSG（静的サイト生成）
  • React 自体には、静的サイト生成のネイティブ サポートはないが、React 上に構築される Gatsby.js などのツールを使って、React コンポーネントから静的サイトを生成できる。
  • Next.js は React を拡張して静的サイト生成のためのサポートが内蔵されていることから、デベロッパーは構築時に静的 HTML ファイルを生成でき、サーバーを必要とせずにそれらを提供できる。

• 自動コード分割：
  • React 自体には、すぐに使える自動コード分割は含まれていないが、Webpack や動的 import() ステートメントなどのツールを使ってコード分割を実現できる。
  • Next.js は自動コード分割をシームレスに統合し、コードを必要に応じて読み込まれる小さなバンドルに分割することで、アプリケーションの初期読み込み時間を短縮する。

• ルーティング：
  • React にはルーティング機能が内蔵されておらず、デベロッパーは通常、React Router などのサードパーティ ライブラリを使って、React アプリケーションでルーティングを処理する。
  • Next.js は、各 React コンポーネントがルートに対応するファイルベースのルーティングシステムを提供し、これにより、ルーティングの構成と管理がシンプルになり、アプリケーション内でのルートの作成と整理がしやすくなる。

• API ルート
  • React 自体は、API ルートまたはサーバーレス関数を作成するためのサポートは内蔵されていない。
  • Next.js は、デベロッパーが API ルートをサーバーレス関数として作成できるようにすることで React を拡張し、それによって Next.js アプリケーション内でデータのフェッチや、サーバー側の操作のシームレスな実行ができるようになる。

• 内臓の CSS および Sass サポート：
  • React には、CSS または Sass を使ったアプリケーションのスタイリングに対すサポートは内蔵されておらず、デベロッパーは通常、CSS モジュール、スタイル付きコンポーネント、またはその他のスタイル ソリューションを React とともに使う。
  • Next.js には、CSS や Sass を使ったアプリケーションのスタイリングのサポートが内蔵されているため、一般的なスタイリング ソリューションとの統合がしやすくなり、より一貫した開発エクスペリエンスがもたらされる。

つまり、React は UI を構築するための基盤を提供しますが、Next.js はサーバー側レンダリング、静的サイト生成、自動コード分割、ルーティング、API ルート、内蔵 CSS および Sass サポートなどの機能を提供することで React の機能を拡張します。 

そしてこの機能が React 開発を強化し、それによって、高パフォーマンスで SEO に配慮した保全可能な Web アプリケーションをより構築しやすくなります。

Next.js は Reactjs よりもいいのか

Next.js は、サーバー側レンダリング、静的サイト生成、ファイルベースのルーティング、API ルート、内蔵の CSS および Sass サポートなどの追加機能で React を拡張します。 そしてこれらの機能により、高性能で SEO に配慮した Web アプリケーションを簡単に構築できます。

ただし、Next.js と React.js は、一方が他方より「優れている」かどうかを直接比較することはできません。 それはすべてプロジェクトとその目標によって違いますからね。

Next.js を React で使えるか

もちろん Next.js は React で使えます。 React で Next.js を使うには、React アプリケーションの作成と同様のプロセスに従いますが、SSR（サーバー側レンダリング）、SSG（静的サイト生成）、ルーティングなどに Next.js 固有の機能を使えます。

React と Next.js のどちらをまず学ぶべきか

React と Next.js のどちらを最初に学ぶかは、目標、背景、学習の好みによって変わってきます。 まず React を学習すると、コンポーネント、状態管理、JSX 構文などの中心的な概念を理解できるようになります。 さらに、フロントエンド開発で使われる抽象化と規約を理解できるようになり、後で Next.js を学習する際に貴重なコンテキストを得られます。

ただし、サーバー側のレンダリング、静的サイトの生成、または実稼働対応のアプリケーションの構築に興味がある場合は、まず Next.jsを学習することが、これらの目標を達成するためのより直接的な方法となる場合があります。

コードに裏付けられたインタラクティブなプロトタイプを設計するためのドラッグ＆ドロップ UI ビルダーである UXPin Merge を使うと、製品の作成が ８.６ 倍速くなります。 社内ポータルサイトや ECサイトなどを真にアジャイルな方法で作成しませんか。 UXPin Merge をぜひ無料でお試しください。