Next.js vs React? 競争ではなくパートナーシップです

公開: 2023-02-07

最新の Web 開発者向けの JavaScript ライブラリとフレームワークが不足することはありません。 最も普及しているライブラリの 1 つは React です。これは、Facebook (現在の Meta) が機能豊富なアプリケーションの構築を支援するために作成したものです。 React アプリケーションは従来、Web ブラウザーで実行されますが、Next.js フレームワークは、JavaScript ランタイム環境 Node.js を介してサーバー側に React 機能を拡張します。

この記事では、Next.js と React を見て、次のプロジェクトに適しているかどうかを判断できるようにします。

Next.js と React: 次のレベルの JavaScript

2022 年の SlashData の調査によると、世界中に 1,700 万人を超える JavaScript プログラマーがおり、Python や Java などの人気のある言語を含むパックをリードしています。 JavaScript はクライアント側とサーバー側の両方で使用できます。この汎用性により、開発者は 1 つのプログラミング言語を使用して本格的なアプリケーションを構築できます。

さまざまな言語を使用しているプログラマーの数を示すグラフは、多くの人が Next.js と React について疑問に思っていることを示しています。
2022年にプログラマーが使用する言語のスラッシュ/データ調査。 (出典: Statista)

React のような JavaScript ライブラリと Next.js のようなフレームワークの導入により、その開発はさらに強化されました。 これらのライブラリとフレームワークは、フロントエンドとバックエンドの統合を簡素化する機能を提供します。 さらに、開発者は npm (Node.js パッケージ マネージャー) などのパッケージ マネージャーを使用して JavaScript 機能を拡張し、JavaScript ライブラリとツールをインストールできます。 これらのリソースは、自分で書かなければならないコードの量を減らす洗練された機能を提供します。

JavaScript の拡張性は、最も一般的なツールに関する包括的な知識が Web 開発者としての成功の鍵であることを意味します。

Next.js とは

2016 年に Vercel によって最初にリリースされた Next.js は、高パフォーマンスの Web アプリケーションを作成するための構成要素を提供するオープンソースの React フレームワークです。 それ以来、いくつか例を挙げると、Twitch、TikTok、Uber などの主要企業がこれを採用しています。

Next.js は、高速で SEO に適したアプリケーションを構築するための最高の開発者エクスペリエンスの 1 つを提供します。 以下は、Next.js を優れたプロダクション フレームワークにする機能の一部です。

  • ハイブリッド レンダリング機能
  • 自動コード分割
  • 画像の最適化
  • CSS プリプロセッサと CSS-in-JS ライブラリの組み込みサポート
  • 組み込みのルーティング

これらの機能により、Next.js 開発者は構成とツールにかかる時間を大幅に節約できます。 次のようなプロジェクトをサポートする可能性のあるアプリケーションの構築に直接ジャンプできます。

  • e コマース ストア
  • ブログ
  • ダッシュボード
  • 単一ページのアプリケーション
  • ユーザー インターフェイスの操作
  • 静的ウェブサイト

Reactとは？

React は、動的なユーザー インターフェイスを構築するために使用される JavaScript ライブラリです。 Web インターフェイスの作成に加えて、React Native を使用してモバイル アプリケーションを構築できます。

React を使用する利点には次のようなものがあります。

  • パフォーマンスの向上: DOM 内の各コンポーネントを更新する代わりに、React は仮想 DOM を使用して、変更されたコンポーネントのみを更新します。
  • コンポーネントベースが多い: コンポーネントを作成すると、繰り返し再利用できます。
  • 簡単なデバッグ: React アプリケーションは、親コンポーネントから子コンポーネントへの単方向データ フローを使用します。

Next.js と React

開発者は Next.js と React を同じ目的で使用することがよくありますが、この 2 つには根本的な違いがいくつかあります。

使いやすさ

Next.js と React から始めるのは簡単です。 いずれも、Node.js の npm の一部であるnpxを使用して、ターミナルで単一のコマンドを実行する必要があります。

Next.js の場合、最も単純なコマンドは次のとおりです。

 npx create-next-app

create-next-appに追加の引数がない場合、インストールは対話モードで続行されます。 プロジェクト名 (プロジェクト ディレクトリに使用されます) と、TypeScript およびコード リンター ESLint のサポートを含めるかどうかを尋ねられます。

次のようになります。

npx で作成された Next.js アプリケーションのスクリーンショット。
インタラクティブ モードでの Next.js アプリケーションの作成。

React インスタンスを初期化するとき、最も単純なコマンドには、プロジェクトのディレクトリの名前が含まれます。

 npx create-react-app new-app

これにより、必要なすべての初期構成と依存関係を含むフォルダーが生成されます。

npx で作成された React プロジェクトのスクリーンショット。
ターミナル コマンド ラインで React プロジェクトを作成します。

どちらも簡単に始めることができますが、Next.js は React の上に構築されていることを覚えておいてください。 したがって、最初に React を学習し、その仕組みを理解せずに Next.js を学習することはできません。 幸いなことに、React は学習曲線が緩やかで、初心者に最適です。

React は比較的構造化されていないことに注意することも重要です。 React ルーターをインストールしてセットアップし、データの取得、画像の最適化、およびコード分割の処理方法を決定する必要があります。 このセットアップでは、追加のライブラリとツールをインストールして構成する必要があります。

対照的に、Next.js には、これらのツールが事前にインストールおよび構成された状態で付属しています。 Next.js では、 pagesフォルダーに追加されたファイルは自動的にルートとして機能します。 この組み込みサポートにより、Next.js は毎日の作業が簡単になり、アプリケーションのロジックのコーディングをすぐに開始できます。

世界を席巻する独自のアプリケーションを計画していますか? このガイドは、プロジェクトに適したオプションを選択するのに役立ちます️ Click to Tweet

Next.js と React の機能

Next.js は React に基づいているため、この 2 つはいくつかの機能を共有しています。 ただし、Next.js はさらに一歩進んで、ルーティング、コード分割、事前レンダリング、API サポートなどの追加機能をすぐに利用できます。 これらは、React を使用するときに自分で構成する必要がある機能です。

データ取得

React はクライアント側でデータをレンダリングします。 サーバーは静的ファイルをブラウザに送信し、ブラウザは API からデータを取得してアプリケーションに入力します。 このプロセスにより、アプリのパフォーマンスが低下し、アプリの読み込みが遅くなるため、ユーザー エクスペリエンスが低下します。 Next.js は、事前レンダリングによってこの問題を解決します。

プリレンダリングでは、サーバーは必要な API 呼び出しを行い、アプリケーションをブラウザーに送信する前にデータをフェッチします。 そのため、ブラウザーはすぐにレンダリングできる Web ページを受け取ります。

事前レンダリングは、静的サイト生成 (SSG) またはサーバー側レンダリング (SSR) を参照できます。 SSG では、HTML ページはビルド時に生成され、複数のリクエストで再利用されます。 Next.js は、データの有無にかかわらず HTML ページを生成できます。

以下は、Next.js がデータなしでページを生成する方法の例です。

 function App() { return <div>Welcome</div> } export default App

外部データを使用する静的ページの場合は、 getStaticProps()関数を使用します。 ページからgetStaticProps()をエクスポートすると、Next.js は返された props を使用してページを事前にレンダリングします。 この関数は常にサーバー上で実行されるため、ページが使用するデータがビルド時に利用可能な場合はgetStaticProps()を使用してください。 たとえば、CMS からブログ投稿を取得するために使用できます。

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

ページ パスが外部データに依存する状況では、 getStaticPaths()関数を使用します。 したがって、投稿 ID に基づいてパスを作成するには、ページからgetStaticPaths()をエクスポートします。

たとえば、以下に示すように、 pages/posts/[id].jsからgetStaticPaths()をエクスポートできます。

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

getStaticPaths()は、多くの場合、 getStaticProps()とペアになっています。 この例では、 getStaticProps()を使用して、パス内の ID の詳細をフェッチします。

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

SSR では、要求された時刻にデータがフェッチされ、ブラウザーに送信されます。 SSR を使用するには、レンダリングするページからgetServerSide() props 関数をエクスポートします。 サーバーはリクエストごとにこの関数を呼び出すため、SSR は動的データを使用するページで役立ちます。

たとえば、ニュース API からデータを取得するために使用できます。

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

データはすべてのリクエストでフェッチされ、小道具を介してニュース コンポーネントに渡されます。

コード分​​割

コード分​​割は、ブラウザがオンデマンドでロードできるチャンクにコードを分割することです。 サーバーはユーザーが必要とするものだけを送信するため、初期ロード中にブラウザーに送信されるコードの量が削減されます。 Webpack、Rollup、Browserify などのバンドラーは、React でのコード分割をサポートしています。

Next.js は、すぐに使えるコード分割をサポートしています。

Next.js では各ページがコード分割され、アプリケーションにページを追加してもバンドル サイズは増加しません。 Next.js は動的インポートもサポートしているため、JavaScript モジュールをインポートして実行時に動的にロードできます。 動的インポートは、バンドルが遅延ロードされるため、ページ速度の高速化に貢献します。

たとえば、以下のHomeコンポーネントでは、サーバーは最初のバンドルに hero コンポーネントを含めません。

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

代わりに、サスペンスのフォールバック要素は、ヒーロー コンポーネントが読み込まれる前にレンダリングされます。

Next.js と React の API サポート

Next.js API ルーティング機能を使用すると、バックエンド コードとフロントエンド コードを同じコードベースに記述できます。 /pages/api/フォルダーに保存されたページはすべて/api/*ルートにマップされ、Next.js はそれを API エンドポイントのように扱います。

たとえば、次のように現在のユーザーの名前を返すpages/api/user.js API ルートを作成できます。

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

https://app-url/api/user URL にアクセスすると、ユーザー名オブジェクトが表示されます。

 { username: 'Jane' }

API ルートは、アクセスしているサービスの URL をマスクしたい場合や、バックエンド アプリケーション全体をコーディングせずに環境変数を秘密にしたい場合に役立ちます。

パフォーマンス

Next.js は、単純化されたプロセスでより優れたパフォーマンスのアプリを作成する能力において、間違いなく優れています。 SSR および SSG Next.js アプリケーションは、クライアント側レンダリング (CSR) React アプリケーションよりも優れたパフォーマンスを発揮します。 サーバー上のデータをフェッチし、ブラウザがレンダリングする必要があるすべてのものを送信することにより、Next.js は API へのデータフェッチ リクエストの必要性を排除します。 これは、読み込み時間が短縮されることを意味します。

さらに、Next.js はクライアント側のルーティングをサポートしているためです。 ブラウザは、ユーザーが別のルートに移動するたびにサーバーからデータをフェッチする必要はありません。 さらに、Next.js 画像コンポーネントにより、画像の自動最適化が可能になります。 画像は、ビューポートに入ったときにのみ読み込まれます。 可能な場合、Next.js は WebP などの最新の形式の画像も提供します。

Next.js は、フォントの最適化、スマート ルートのプリフェッチ、バンドルの最適化も提供します。 これらの最適化は、React で自動的に利用できるわけではありません。

サポート

React は Next.js よりも長く存在しているため、より広範なコミュニティがあります。 しかし、多くの React 開発者が Next.js を採用しているため、コミュニティは着実に成長しています。 開発者は、ソリューションをゼロから構築するよりも、遭遇した問題に対する既存のソリューションをより簡単に見つけることができます。

Next.js には、理解しやすい包括的な例を含む優れたドキュメントも用意されています。 その人気にもかかわらず、React のドキュメントはナビゲートしやすくありません。

あなたは Team Next.js ですか、それとも Team React ですか? この投稿で両方の人気のあるオプションを探るクリックしてツイートする

まとめ

Next.js または React の選択は、アプリケーションの要件に帰着します。

Next.js は、パフォーマンスを向上させる構造とツールを提供することで、React の機能を強化します。 ルーティング、コード分割、画像最適化などのこれらのツールは Next.js に組み込まれているため、開発者は手動で何も構成する必要がありません。 これらの機能のおかげで、Next.js は使いやすく、開発者はビジネス ロジックのコーディングをすぐに開始できます。

さまざまなレンダリング オプションがあるため、Next.js は、サーバー側でレンダリングされるアプリケーション、または静的生成と Node.js サーバー側レンダリングを組み合わせたアプリケーションに適しています。 また、Next.js が提供する最適化機能のおかげで、e コマース ストアのように高速である必要があるサイトに最適です。

React は、堅牢なフロントエンド アプリケーションの作成とスケーリングに役立つ JavaScript ライブラリです。 特に JavaScript のバックグラウンドを持つ開発者にとっては、その構文も単純です。 さらに、アプリケーションで使用するツールとその構成方法を制御できます。

世界を席巻する独自のアプリケーションを計画していますか? React および Next.js をサポートするサービス向けの Node.js アプリケーション ホスティングに対する Kinsta のアプローチを掘り下げます。