Next.jsの概要についてまとめました。
1. Next.jsとは？
Next.jsは、Reactベースのフレームワークです。
ReactでWebアプリを開発するうえでよく使う機能（ルーティング、データ取得、SSRなど）を最初から組み込んでいます。
2. 特徴
| 特徴 | 説明 |
|---|---|
| ファイルベースルーティング | pagesディレクトリにファイルを置くだけで自動的にルーティングされる |
| SSR/SSG/ISR 対応 | サーバーサイドレンダリング、静的生成、増分生成すべて対応 |
| APIルート機能 | /pages/api以下に置くだけでバックエンドAPIが作れる |
| 画像最適化 | <Image>コンポーネントで自動リサイズ・WebP変換など |
| App Router（新機能） | appディレクトリベースの新しい構成（2023〜）で柔軟性UP |
| SEOに強い | サーバー側でHTMLが生成できるため、検索エンジンに優しい |
3. Reactとの違い
| 観点 | React | Next.js |
|---|---|---|
| 種類 | ライブラリ | フレームワーク |
| UI描画 | コンポーネントだけ提供 | UIに加え、ページルーティングやデータ取得方法も用意 |
| 開発構造 | 自由度が高いが自力設計が必要 | ベストプラクティスが組み込まれていて効率的 |
つまり、Reactが「部品」だとすると、**Next.jsは「完成形に近い骨組みつきの家」**というイメージです。
4. ディレクトリ構成
my-app/
├─ app/
│ ├─ page.tsx ← トップページ（ルート）
│ ├─ about/
│ │ └─ page.tsx ← /about ページ
│ └─ layout.tsx ← 全体レイアウト
├─ public/ ← 画像やファイルなど
├─ package.json ← パッケージ情報
page.tsx→各ページのエントリーポイントlayout.tsx→共通デザイン（ナビゲーションやフッター）に使うapp/api/hello/route.ts→`APIルート（例：/api/hello）
今回はここまでです。
