フレームワークと Next.js
この章でわかること: 「フレームワーク」とは何か、よく使われる Next.js で何ができるか、 そして他の選択肢との違いと選び方。どれか1つが「正解」ではなく、用途で選びます。
フレームワーク = 作りかけの土台キット
Section titled “フレームワーク = 作りかけの土台キット”ゼロから家を建てる代わりに、骨組み・配線・水回りが済んだ状態から始められる 土台キット——それがフレームワークです。よくある仕組み(画面遷移、データの やりとり、公開の準備など)が最初から用意されているので、本質的な部分に集中できます。
Next.js はどこまでできる?——フロントもバックも
Section titled “Next.js はどこまでできる?——フロントもバックも”Next.js の特徴は、画面(フロント)と裏の処理(バック)を1つのプロジェクトで まとめて作れることです。具体的には次のようなことが、Next.js だけで完結します。
- 画面の表示(高速に見せる仕組みが標準装備)
- APIの自作(
/api/...のような自分専用の窓口=「APIルート」を作れる) - サーバー側の処理(フォーム送信を受け取って保存する等。こうしたサーバー側で動く処理の置き場所を「サーバーアクション」と呼びます)
- データベースや外部APIとのやりとり(秘密の鍵を安全な裏側で扱える)
- ログイン・認証の組み込み
他にどんな選択肢がある?
Section titled “他にどんな選択肢がある?”| フレームワーク | 向いている用途 |
|---|---|
| Next.js | 表も裏もある一般的なWebアプリ。プロトタイプから本番まで幅広く |
| Astro | 読み物・LP・ドキュメントなど「中身を見せる」用途に強い(動的な機能も持つが、得意は静的。※このサイト自身がAstro製) |
| その他(SvelteKit, Remix 等) | 基本は同種。好みやチームの慣れで選ぶ |
選び方の目安
Section titled “選び方の目安”- 動き・データ保存・ログインなど機能が増えそう → Next.js のようなフルスタック
- ほぼ文章や画像を見せるだけで速さ重視 → Astro のような静的系
- その場で見せて配りたい(手軽さ重視) → 単一ファイル構成(プロトタイプの作り方の選択肢)
どれが上位ということはありません。目的に合うものを選ぶのがコツです。
「何で作るか」は、できること・頼める内容の土台を決めます。選択肢を知っていれば、 AIにも「○○で作って」と意図を持って頼めて、最初から噛み合った提案が返ってきます。 作り方の路線そのものの比較はプロトタイプの作り方の選択肢へ。
参考リンク(情報ソース)
Section titled “参考リンク(情報ソース)”- Next.js 公式: https://nextjs.org
- Astro 公式: https://astro.build