覚書：Next.jsの魅力とその活用ポイント

覚書：Next.jsの魅力とその活用ポイント

フロントエンドとバックエンドの境界線がなくなる

Next.jsでは、React 19のサーバーコンポーネント機能を使うことで、フロントエンドとバックエンドの垣根が大きく取り払われます。従来はフロントエンドからデータを取得する際、APIを使ってバックエンドとやり取りをする必要がありました。しかし、今では以下のようなメリットがあります。

• コンポーネント内で直接SQLクエリを実行し、そのデータをフロントエンドで表示できる。

• fetchでAPIを呼び出してデータを受け取るという従来の作業が不要になり、開発がシンプル化。

• サーバーアクションを使えば、クライアント側からサーバー側の関数を直接呼び出して処理を実行できる。

• フロントエンドとバックエンドで一貫した型定義が利用でき、型違反を防ぎやすくなる。

これにより、データの取得から表示までの流れがスムーズになり、開発者にとって非常に使いやすい環境が整っています。

状態管理の必要性が減少

Next.jsでは、状態管理の必要性も大幅に減少します。特に以下の点が大きな特徴です。

• 状態管理ツール（Reduxなど）を使う必要が少なくなった。各コンポーネントが自分で必要なデータを取得できるため、グローバルに状態を管理する手間が減少。

• getServerSidePropsのように、上位コンポーネントからデータを渡す必要がなくなり、データ取得がシンプルに。

• リバリーパス機能を活用すれば、状態管理ツールを使わずにコンポーネント間でデータの変更が自動的に反映される。

これにより、状態管理が複雑になりがちなSPAの開発であっても、シンプルな設計での開発が可能になります。

サーバーアクションの導入

Next.jsでは、サーバーアクション機能が導入されており、クライアント側からサーバー側の関数を直接呼び出せるようになっています。例えば、以下のようなメリットがあります。

• クライアント側のボタン操作でサーバー側でデータベースの更新処理（例：いいねのインクリメント）が簡単に行える。

• APIやGraphQLを介さずに、関数呼び出しの感覚でサーバー処理を実行できる。

• フロントエンドとバックエンドで型が一貫しているため、型の整合性が保たれ、開発の効率が向上。

こうした機能により、より迅速で簡単な開発が可能になっています。

ベンダーロックインに対する懸念

Next.jsはVercelが提供しているため、Vercelへの依存やベンダーロックインを懸念する声もありますが、実際には以下の点が考慮されています。

• Next.jsはAWSのECSなど、他のホスティング環境でもセルフホスティングが可能であり、Vercel依存の問題はさほど大きくない。

これにより、フレームワークに対する不安も軽減されます。

学習コストの懸念

Next.jsに関して、学習コストが高いという声もありますが、以下の理由からそれほど心配はいらないかもしれません。

• Reduxを使ったSPA開発と比べると、Next.jsの学習コストは低い。

• Railsなどのフレームワークと比べても、Next.jsはJavaScript、TypeScript、Reactの基本を理解していれば、学びやすい。

• フロントエンドとバックエンドを同じフレームワークで扱えるため、学習負担が軽減。

全体的に、Next.jsは効率的な開発体験を提供しつつ、学習のハードルも比較的低めだと感じています。