Next.jsがフルスタックと言われる一つの理由

はじめに

Next.jsについて勉強中の初学者です。
勉強する中で、疑問に思った点を記述します。

問題

Next.jsはフルスタックフレームワークというけど、何がフルスタックなの？Reactベースの他のフレームワークと何が違うの？何が嬉しいの？

解決方法

普通にReactでアプリを作る場合、こうなる。
・フロントエンド：Reactアプリ（例：create-react-appで作ったプロジェクト)で、ブラウザで動くJavaScriptを書く。
・バックエンド：別のプロジェクトとして、Express.js（Node.js）やDjango、Railsなどでサーバーを立てる。データベースへのアクセスや認証処理はここに書く。

この２つは別のプロジェクト（別のフォルダやリポジトリ）でデプロイされ、別々に動く。

Next.jsでは、同じプロジェクトの中に両方を入れられる。

my-app/
  pages/
    index.tsx      ← これがフロントエンド（画面）
    api/
      hello.ts      ← これがバックエンドAPI

何が嬉しいのか。
１、プロジェクトが１つで完結する。
２、プロジェクトは１つだが、pages/api下のコードはサーバー側で実行されるので、安全な情報の取り扱いができる（クライアント側にブラウザを通じて不要な情報が渡らない）。
３、１つの言語（JavaScript/TypeScript)でフロントエンドとバックエンドを書くことができる。

例えば、AWSのEC2上にアプリのDockerコンテナを立ち上げる場合で考えてみます。

Next.jsを使わない従来の構成

# docker-compose.yml
services:
  frontend:
    build: ./frontend  # Reactアプリ
    ports:
      - "3000:3000"
  backend:
    build: ./backend   # Express.jsなど
    ports:
      - "8000:8000"
  db:
    image: postgres

Next.jsを使う場合

services:
  app:
    build: .   # Next.jsプロジェクト全体（フロントもバックエンドAPIも含む）
    ports:
      - "3000:3000"
  db:
    image: postgres

docker compose upすると、Next.jsのコンテナが1つ立ち上がり、そのコンテナの中で http://localhost:3000/（画面）もhttp://localhost:3000/api/hello（API）も両方動きます。コンテナを分ける必要がないわけです（DBは別コンテナにするのが普通ですが、それはフロント/バックエンドの分離とは別の話なので割愛します）。

フロントエンドとバックエンドAPI（pages/api）は「同じプロジェクト」です。つまりDockerコンテナも基本的には1つで済むことになります。

おわりに

ReactやVueなどの、他のフロントエンドのフレームワークは画面を作るだけですが、Next.jsは「画面を作る機能」と「簡易的なバックエンドサーバーを作る機能」が１つのプロジェクトに同梱されていること（フルスタック）が分かりました。
Next.jsの特徴を一つ理解することができました。