開発者向けの Next.js と React について知る

React はユーザー インターフェイスを構築するための最も人気のあるライブラリの 1 つであり、Next.js はユーザー インターフェイスを構築するための最も人気のあるフレームワークの 1 つです。

Next.js は React を使用して構築されています。したがって、それらの間には多くの類似点があります。これら 2 つを混同するのは明らかです。

これら 2 つを深く掘り下げて、混乱を明確にする上でそれらがどのように異なるかを見てみましょう。まずはReactから始めましょう。

React: はじめに

React は 、JavaScript を使用してユーザー インターフェイスを構築するためのオープンソース ライブラリです。 React は、単一ページの Web アプリケーションを作成するために使用されます。シングルページアプリケーションとは何を意味しますか?アプリケーションには単一の HTML ドキュメントがあり、必要に応じてそれを更新します。

シングルページ Web アプリケーションの作成は現在、最高潮に達しています。そして、React は現在、この分野で最も人気のあるライブラリであると言えます。それは誇張ではありません。

多くの React パッケージが利用可能であり、開発者の作業が容易になります。 Web アプリケーションの構築に関しては、React を使用してあらゆるタイプの Web アプリケーションを作成できます。

React は Facebook によって開発されました。今では誰でも貢献できるようになりました。そしてそれは Facebook によって維持されています。

React のいくつかの 機能 を確認してみましょう。

仮想 DOM

Web アプリケーションは、データのフェッチ中にローダーを表示し、取得したデータで Web アプリケーションのその部分を更新するなど、他の部分に影響を与えることなく特定の部分を更新します。より技術的に言えば、ブラウザーの DOM を更新することです。

React のようなライブラリがなければ、バニラ JavaScript を使用して実行することになりますが、DOM 操作には非常にコストがかかるため非効率的です。 React では、この問題に対処するために 仮想 DOM の概念が導入されています。

仮想 DOM は実際の DOM のコピーです。更新がある場合、React はまず仮想 DOM 内で更新を更新し、実際の DOM と比較します。そして、React は変更があった場合にのみ実際の DOM を更新し、変更された部分のみを更新します。そのため、実際の DOM に対する操作が減り、更新時間が大幅に短縮されます。

React のようなライブラリがなければ、Web は非常に遅かったでしょう。

コンポーネント

コンポーネントは、React のユーザー インターフェイスの構成要素です。 React のすべてはコンポーネントであると言えます。これらのコンポーネントは、React アプリケーション全体で再利用できます。

いくつかのスタイルセットを持つボタンがあるとします。 React では、渡したプロパティに基づいたスタイルでボタンをレンダリングするコンポーネントを作成できます。小道具を使用して、そのボタン コンポーネントを必要に応じてカスタマイズできます。これにより、React アプリケーション全体でコンポーネントを再利用できるようになります。

コンポーネントは、アプリケーションを小さな UI ブロックに編成するのに役立ちます。ご希望に応じてアレンジいたします。

JSX

JSXというJSでHTMLを書くことができます。 HTML に似ていますが、JSX です。 JSX で JavaScript を使用し、それとともにすべての HTML 属性にアクセスできます。

JSX は UI の構造を定義するために使用されます。すべてのコンポーネントは JSX を返し、それが DOM でレンダリングされます。

一方向のデータフロー

コンポーネントを小さくするには、コンポーネント間を流れるデータが必要です。コンポーネント間にデータフローがない場合は、すべてを 1 つのコンポーネントに収容する必要があります。

React は、親から子への一方向のデータ フローに従います。 React では、親コンポーネントから子コンポーネントにデータを渡すことができます。子コンポーネントは親コンポーネントの状態を直接変更することはできません。これはコールバックを渡すことで実行できます。

単方向のデータ フローにより、デバッグが簡単になります。すべてのコンポーネントが状態を維持する必要がないため、コンポーネントは非常にシンプルに見えます。

JavaScript を知っていれば、React の学習は非常に簡単です。使い始めるには React のドキュメントで十分です。

Next.js: はじめに

Next.js は、 Web アプリケーションを構築するための React フレームワークです。 React の上に構築されています。ヴェルセルが作ったものです。したがって、React のすべての機能が利用可能になります。 Next.js の特別な点は何ですか? React コンポーネント以外の特別な機能をいくつか見てみましょう。

プリレンダリング

Next.js は事前にすべてのページをレンダリングします。事前にレンダリングすると、静的な HTML を使用してページがブラウザーにすばやく読み込まれます。その後、そのページに必要な JavaScript がロードされます。ページのパフォーマンスと SEO が向上します。

プリレンダリングには 2 種類あります。 1 つは静的サイト生成 (SSG) で、もう 1 つはサーバー側レンダリング (SSR) です。 SSG はビルド時に HTML を生成し、それを他のリクエストで再利用します。

SSR はリクエストごとに HTML を生成するため、SSG よりも少し遅くなります。 Next.js では、SSR の使用が必須になるまで SSG の使用を推奨しています。

Next.js は、現在表示しているページにリンクがあるページ (Link コンポーネントを使用) もプリロードします。この優れた機能により、移動中にページが非常に高速に読み込まれるようになります。

ルーティング

Next.js にはルーティング システムが組み込まれています。ディレクトリベースのルーティング システムをサポートします。ルートを作成するには、特定のディレクトリにページを作成する必要があります。 React では、これを実現するためにパッケージを使用する必要があります。

API

Next.js を使って Express と同様に API を作成できます。 Next.js を使用してフルスタック アプリケーションを作成する新たな可能性が開かれます。専用のサーバー側フレームワークほど効率的ではないかもしれませんが、十分な機能を果たします。

その他の 機能

他にも、画像の最適化、組み込みの CSS サポート、各ページのメタ タグ (SEO 向上のため) などの機能があります。これまでに見てきたすべての機能は、React の機能に加えて Next.js の追加機能です。

Next.js は、リリースされて以来、非常に人気を得ています。 React に精通している場合は、Next.js を学習するのが非常に効果的です。しかし、最初に反応することを学ぶことは必須ではありません。まずは誰からでも始められます。どちらの場合も JavaScript は必須です。

これまで、React と Next.js のさまざまな機能を見てきました。両方を比較してみましょう。

React と Next.js の比較

React と Next.js の間には多くの類似点があります。それらの間に多くの類似点がある理由はすでにご存知でしょう。それらの中心となる概念は同じです。それらのいくつかを並べて比較してみましょう。

コード

簡単な Hello World! を見てみましょう。 React と next.js のコンポーネント。

反応する

function App() {
   return (
      <div className="app">
         Hello World!
      </div>
   );
}
export default App;

Next.js

 export default function Home() {
  return (
    <div className="app">
      Hello World!
    </div>
  )
}

コードを見ると、両者に違いはありません。

フォルダー構造

React は、特定のフォルダー構造を持たないライブラリです。好みやユースケースに基づいてフォルダーとファイルを配置できます。

Next.js には、従うべき厳密なフォルダー構造もありません。ただし、ルーティングのためにのみ pages フォルダー内にページを作成する必要があります。これが next.js にある唯一の制限です。他のすべてのフォルダーとファイルを反応のように配置できます。

パフォーマンス

Next.js アプリケーションは、React アプリケーションと比較して少し高速です。 Next.js はプリレンダリング技術を使用してそれらを作成します。しかし、React アプリケーションを高速化できないという意味ではありません。 React でも同じことを実現できます。私たちはそれに特別な努力をする必要があります。

TypeScript

TypeScript は、大規模なアプリケーションで重要な役割を果たします。 TypeScript がなければ、ほとんどの開発者はアプリケーションのデバッグにイライラするでしょう。 React と Next.js はどちらも TypeScript をサポートしていますので、心配する必要はありません。

その他の 機能

React と Next.js はどちらも作成者によって大幅に保守されています。どちらのコミュニティも、他のフロントエンド ライブラリやフレームワークと比較して非常に大規模です。 React と Next.js を使用してアプリケーションを開発中に行き詰まった場合は、インターネットで解決策が見つかる可能性が高くなります。

これらのドキュメントは、始めるのに非常に適しています。私たちは何をぐずぐずしているんですか？ React と Next.js の ドキュメントにアクセスして、使用を開始してください。

まとめ

特徴	反応する	Next.js
コード	React アプリケーションをコーディングするには、JavaScript を理解するだけで十分です。	コードは React の上に構築されるため、React に似ています。
フォルダー構造	フォルダー構造に厳密なガイドラインを課さないでください。	これにより、フォルダー構造の一部に従う必要があります (ページ ルーティング)。
TypeScript	タイプスクリプトをサポートしています。	タイプスクリプトもサポートしています。
サーバーサイドレンダリング	サーバー側レンダリングのサポートが組み込まれていません。	プリフェッチによるサーバー側レンダリングのサポートが組み込まれています (SSG および SSR)
パフォーマンス	Next.js に比べて少し遅い	Reactに比べて少し速いです。
コミュニティ と メンテナンス	Facebook によって適切に保守されており、それをサポートする大規模なオープンソース コミュニティがあります。	Vercelはそれを維持するのにも素晴らしい仕事をしています。また、オープンソース コミュニティのサポートもあります。
ドキュメントと学習	初心者でも分かりやすく文書化されています。 JavaScript の知識があれば、いつでも始めることができます。	充実したドキュメントがあり、React の概念を知っていれば学習が早くなります。

どれを選びますか?

まあ、その質問には誰も答えられません。それは、プロジェクトの種類、その内容、その目的などによって異なります。それらの機能と要件をすべて確認することで結論を導き出すことができます。

私たちがすぐに結論付けることができるものの 1 つは SEO です。プロジェクトに多くの SEO が必要な場合は、Next.js を使用することをお勧めします。

私たちは結論を得るために、すべてのシナリオでさまざまな要素を検討しました。結論が出ない場合は、React を使用する方が良いでしょう。また、コードの移行にはそれほど時間がかからないため、いつでも初期段階で別のものに切り替えることができます。それほど時間がかからない理由はわかります😄。

どちらも良いコミュニティを持っています。 React と Next.js はフロントエンド ドメインで広く使用されているため、React と Next.js を使用するときに直面するほとんどすべての問題の解決策が見つかります。 Web アプリケーションを構築するためのパッケージが多数見つかります。 React と Next.js の両方で同じパッケージを使用できます。

決断を下すのは常に難しいことです。しかし、決断を下すことを恐れないでください 😜。

結論

Next.js は React のスーパーセットであると言えます。 Next.js は、それを使用する React 機能に加えて、より多くの機能を備えて作成されます。したがって、それらを比較することは理想的ではありません。それでも、やり遂げました😅。とにかく、これで React と Next.js の両方についてのトップレベルのアイデアが得られました。

ご覧のとおり、Next.js の追加機能を除いて、それらの間に大きな違いはありませんが、これは明らかです。今日はここまでです。ちょっとした提案でこれを終わりにしましょう。

フロントエンド フレームワークを学習する場合は、まず React から始めることをお勧めします。 React の概念により、Next.js の学習は簡単になります。

ReactJS を学習するのに最適なリソースをいくつか探索することもできます。