Next.js がやってくれていたこと全部、自分でやってみた

BRANK

はじめにNext.js でアプリを作ると、ルーティング、API、認証、ビルド最適化まで全部フレームワークがやってくれる。開発は快適だが、「なぜその構成なのか」を聞かれると答えに詰まる場面があった。そこで、会計システムを題材に Next.js を使わずに React + Hono + Supabase で同じことを実現する構成で開発してみた。この記事では、Next.js が裏でやってくれていることを1つずつ取り出して、「自分でやるとどうなるか」を比較する。Next.js を否定する記事ではない。便利さの裏にある仕組みを理解するための記録。1. ルーティングNext.js の場合app/ ├── page.tsx → / ├── login/ │ └── page.tsx → /login └── dashboard/ └── page.tsx → /dashboard ファイルを置くだけでルートになる。ルーティングの設定は書かない。自前の場合バックエンドの Hono では、ルートを明示的に定義する:app.get("/", (c) => c.json({ message: "Hello" })); app.get("/api/organizations", (c) => { /* ... */ }); app.post("/api/organizations", (c) => { /* ... */ }); フロントエンドも、React Router などを使って自分でルーティングを…