📘

いまさら、Next.jsを調べてみる

2024/06/16に公開

ごあいさつ

こんにちは！
オアシステクノロジーズの山本です。

いまや、フロントエンド開発において必須となっているJavaScriptフレームワークですが、
デファクトスタンダード（業界標準）となっている！？ReactとNext.jsについて整理してみたいと思います。
どなたかの製品選定等に役立てば幸いです。

フロントエンドの開発に携わっているかたで、以下のJSライブラリは聞いたことがあるかと思います。

Next.jsはReactのフレームワークです、Reactアプリケーションのサーバーサイドレンダリング（SSR）
をサポートするよう拡張されたものです。

※フロントエンド開発とは、ユーザーが直接操作するWebサイトやWebアプリケーションの「見た目」や「動き」を構築する分野です。
　主に、ユーザーインターフェース（UI）を設計し、ユーザーエクスペリエンス（UX）を最適化します。

Reactの特徴と人気の理由として以下が挙げられます。

コンポーネントベースの設計
　
　UI（画面）をコンポーネントとして構築することを重視している。これにより、画面を小さな部品に分割し、再利用性を高めることができる。
仮想DOMによる高パフォーマンス
　
　仮想DOMを使用して、効率的に画面表示内容を更新できる。仮想DOMはメモリ内に存在する仮想的なDOMの表現であり、実際のDOM（画面）と同期させる前に、変更された部分のみを更新することができ、これにより、パフォーマンスが向上されている。
広範なコミュニティとエコシステム

Facebookによって開発され、広範なコミュニティとエコシステムを持っている。

※エコシステムとは、特定の技術やプラットフォームに関連する、さまざまなツール、ライブラリ、フレームワーク、ドキュメントやチュートリアルを指す。

ReactはJavaScriptライブラリであり、UIを構築するためのツールセットを提供します。
Next.jsはReactをベースにしたフレームワークであり、Reactに加えて、ルーティング、サーバーサイドレンダリング、静的サイト生成などの機能を提供します。

ルーティングとサーバーサイドレンダリング:

Reactでは、ルーティングやサーバーサイドレンダリングを行うために、別途ライブラリやツールを使用する必要があります。
Next.jsは、デフォルトでルーティングとサーバーサイドレンダリングをサポートしており、セットアップが容易です。
静的サイト生成:

Reactでは、静的サイトを生成するために、別途ツールやフレームワークを使用する必要があります。
Next.jsは、静的サイト生成をデフォルトでサポートしており、静的なコンテンツを効率的に生成できます。
ファイルベースのルーティング:

Next.jsでは、ファイルやディレクトリの構造に基づいた自動ルーティングが可能です。
Reactでは、ルーティングの設定やマッピングを手動で行う必要があります。
設定とデプロイ:

Reactプロジェクトでは、設定やデプロイに関する詳細なカスタマイズが必要です。
Next.jsでは、デフォルトで最適な設定が提供され、デプロイが容易です。

##　まとめ

Next.jsは、Reactの上に構築されたフレームワークで、サーバーサイドレンダリング（SSR）、
静的サイト生成（SSG）、APIルート、ファイルベースのルーティングなどを提供します。

これにより、Reactを使用するプロジェクトで高パフォーマンスとSEOを重視する場合や、
フルスタックのニーズに対応する際にNext.jsが選ばれることが多くなっています。

複雑なWebアプリケーションの開発においてはNext.jsが標準的な選択肢となりつつあります。