Next.jsとは何か
なぜ学ぶか： 「Reactでアプリを作って」とAIに頼むと、実際にはほぼNext.jsのプロジェクトが生成されます。ReactとNext.jsは何が違うのか — まず、生成されるフォルダ構成から見てみましょう。
まずはこの例を見てみましょう
my-app/ ├── src/ │ └── app/ ← ページを置く場所（Next.js の本拠地） │ ├── layout.tsx ← 全ページ共通の骨格 │ ├── page.tsx ← トップページ（URL: /） │ └── globals.css ← 全体のスタイル ├── public/ ← 画像などのファイル ├── package.json ← アプリの取扱説明書 └── next.config.ts ← Next.js 本体の設定
AIが生成するNext.jsプロジェクトの典型的な形。app/フォルダの中がページです。
React＝部品を作る道具、Next.js＝アプリを作る道具
Reactは「画面の部品」を作るもの。Next.jsはそれに、ページの切り替えやサーバー機能を足した「フルセットの枠組み」です。中身はReactなので、前のフェーズの知識はそのまま使えます。
Next.jsが足してくれるもの
ページの管理・サーバー側での画面生成・画像の最適化・API機能。ゼロから組むと大変なものが最初から揃っています。
AIがNext.jsを選ぶ理由
実質的な業界標準で情報が多く、公開も簡単だからです。「Reactで」と頼んでもNext.jsが返ってくるのはこのためです。
app/フォルダが今の方式のしるし
例の構成のようにapp/にページがあれば、現行方式（App Router）のプロジェクトです。
フォルダ構成の例
my-app/ ├── src/ │ └── app/ ← App Router の本拠地 │ ├── layout.tsx ← 全ページ共通の骨格 │ ├── page.tsx ← トップページ（URL: /） │ └── globals.css ← 全体のスタイル ├── public/ ← 画像などのファイル ├── package.json ← アプリの取扱説明書 └── next.config.ts ← Next.js 本体の設定
手元にAIが作ったプロジェクトがあれば、この地図と見比べてみてください。同じ構成になっているはずです。
ステップ 1 / 2
※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。