「よし、言語（TypeScript）は決まった。早速コードを書くぞ！」
と、意気込んでいるあなた。
まさか、真っ白なファイルに1からコードを書こうとしていませんか？
Webアプリ開発において、0から全てを作るのは「丸太から木材を加工してお店を建てる」ようなものです。
プロのエンジニアはそんな大変なことはしません。「プレカットされた建材と、専用工具のセット（フレームワーク）」を使います。
今回は、現在のWeb開発で世界標準となっているフレームワーク「Next.js（ネクスト・ジェイエス）」について、その正体と、実際に手元のPCで動かすまでの手順を解説します。
1. そもそも「フレームワーク」ってなに？
フレームワーク（Framework）を直訳すると「枠組み」です。
プログラミングにおいては、「よく使う機能と、それを動かす仕組みのセット」だと思ってください。
「丸太からの加工」と「プレカット工法」の違い
- フレームワークなし（丸太から加工）：
自由度は無限大ですが、柱一本立てるのにも高度な技術が必要です。「ページ移動」や「画像表示」の仕組みも全部自作する必要があります。 - フレームワークあり（プレカット工法）：
目的別に「プレカットされた建材」と、それを組み立てるための「専用工具」をセットで準備します。
あなたはそれを図面通りに組み立てるだけで、高品質のお店を建てることができます。
厳密には組み立てにも技術が必要ですが、丸太から加工するのに比べれば随分ハードルが下がります。
Node.jsとNext.jsの関係性は？
過去の記事も見てくれている方は「以前インストールしたNode.jsと、今回のNext.jsはどう違うの？」と疑問に思うかもしれません。
名前は似てますが別物です。以前の記事の例にあてはめるとこんな感じになります。
- 🛠️ 作業台 ＝ コードエディタ (VSCode)
実際に木材（ソースコード）を切ったり組み立てたりする場所です。 - 🔋 電動工具のバッテリー ＝ Node.js
これがないと、最新の便利な電動工具（フレームワークなど）が動きません。動力源です。 - 🏗️ 最新の建材と電動工具セット ＝ Next.js（フレームワーク）
今回使うのはこれ！ Node.jsというバッテリーを使って動く、「便利な建材」と「ハイテク工具」の詰め合わせセットです。 - 🔮 セーブポイント ＝ Git
現実ではあり得ませんが、「失敗した！昨日の状態に戻そう」ができる魔法のセーブ機能です。 - ✨ 検査場 ＝ Google Chrome
作ったお店（アプリ）を確認する場所です。
つまり、「Node.jsというバッテリーがあるから、Next.jsというハイテクなキットが動かせる」というわけです。
※補足：正確には、Node.jsは「本来ブラウザ上で動作するJavaScriptをサーバー側で動かすための実行環境（ランタイム）」です。
2. なぜNext.js？他のフレームワークとの違い
Web開発のフレームワークには、いくつか有名どころがあります。
Next.jsの立ち位置を理解するために、ライバルたちと比較してみましょう。
① React (リアクト)
「エンジンの部品」
Facebook（Meta）が作った、現在世界で一番人気のツールです。
実はNext.jsも、中身はこのReactで動いています。
ただ、React単体だと「内装パーツ」しか作れず、廊下や玄関（ページ移動やSEO対策）などの機能は自分で追加しないといけません。
② Next.js (ネクスト・ジェイエス)
「全自動の家づくりキット」
Reactをベースに、「これさえあればWebアプリとして公開できるよ」という機能を全部盛りにした最強セットです。
今、Webアプリを作るならこれ一択と言われるほどの標準ツールです。
③ Vue.js / Nuxt (ビュー / ナクスト)
Reactのライバルです。書き方がHTMLに近く、初心者でもわかりやすいと言われています。
しかし、2026年現在の求人数や情報の多さ、エコシステムの強さでは、React/Next.jsに軍配が上がります。
3. 初心者にNext.jsをおすすめする3つの理由
なぜ私がここまでNext.jsを推すのか。理由は以下の3点です。
- 画面構成が直感的：
Next.jsには「App Router（アップ・ルーター）」という最新の仕組みが搭載されています。
これは、「どのURLでどのページを表示するか」を決めるルールのことです。
難しい設定ファイルは不要で、「フォルダを作ってファイルを置くだけ」で勝手にページになります（例：contactフォルダを作れば/contactというURLになる）。 - 表示が爆速：
Next.jsには、重い処理をサーバー側で先に済ませておく技術（SSR/SSG）が標準装備されています。
ユーザーを待たせない高速なサイトを簡単に作れます。 - ホスティングサービスとの相性が最強：
以前紹介した「Vercel」や、Googleの「Firebase App Hosting」といった最新の公開場所は、Next.jsを動かすために最適化されています。
つまり、Next.jsで作れば、面倒なサーバー設定なしで世界中に一発公開できるのです。
4. 実践！Next.jsのセットアップ手順
それでは、実際にあなたのPCの中にNext.jsのプロジェクト（WEBアプリの土台）を作ってみましょう。
STEP 1: 作業場所（フォルダ）の作成
まずは開発用のフォルダを作成しますが、デスクトップにフォルダを置くのは卒業しましょう。
開発用のフォルダは、以下のような場所に作るのがおすすめです。
📂 おすすめのフォルダ構成例
User配下でなくても整理された場所であればOKです。
今回の例であればworkspaceフォルダにWEBアプリごとのフォルダを作成していきます。
- Windowsの方：
C:\Users\ユーザー名\workspace
（ユーザーフォルダの直下にworkspaceというフォルダを作る） - Macの方：
/Users/ユーザー名/workspace
（ホームフォルダの直下にworkspaceというフォルダを作る）
作成した workspace フォルダを、VSCodeで開いてください。
STEP 2: インストールコマンドの入力
これから行うのは、「Next.js」をダウンロードして、プロジェクトとしてPCに保存する作業です。
VSCodeの上部メニューからターミナル > 新しいターミナルを選び、以下のコマンドを入力してEnterキーを押します。
npx create-next-app@latest my-first-app※ my-first-app の部分は、作りたいアプリの名前に変えてOKです。
💡 コラム：Gitリポジトリは先に作らなくていいの？
「先にGitHubでリポジトリを作ってからCloneするんじゃないの？」と思う方もいるかもしれません。
実は、Next.jsのこのコマンドを使うと、自動的にローカルのGit設定（git init）までやってくれます。
なので、「まずはアプリを作る」→「後でGitHubと連携する（Pushする）」という順番で進めるのが、一番トラブルが少なくおすすめです。
STEP 3: 質問に答える（設定項目）
コマンドを実行すると、英語でいくつか質問されます。
基本的には全てそのままでで良いのですが、よくある質問を何を聞かれているのか解説します。（バージョンによって結構内容がかわります）
| 質問内容（英語） | 意味と推奨回答 |
|---|---|
| Would you like to use TypeScript? | Yes 前回の記事で解説した通り、必須です。Noを選ぶと古いJavaScriptになります。 |
| Would you like to use ESLint? | Yes コードの書き方チェックツールです。入れておきましょう。 |
| Would you like to use Tailwind CSS? | Yes デザインを楽にするツールです。次回以降で解説します。 |
| Would you like to use `src/` directory? | Yes ソースコードを src フォルダにまとめるか？最近の主流はYesです。 |
| Would you like to use App Router? | Yes 最新の仕組みです。Noを選ぶと古い作り方になるので絶対Yesで。 |
| Would you like to customize the default import alias? | No ファイルの読み込み設定です。今はそのままでOK。 |
全て回答が終わるとインストールが始まります。Success! と表示されたら準備完了です！
STEP 4: 起動してみる
以下のコマンドを入力して、開発用サーバーを立ち上げます。
cd my-first-app
npm run devターミナルに Ready in ... と出たら、Chromeで http://localhost:3000 にアクセスしてみてください。
Next.jsの初期画面が表示されれば大成功です！
5. 少しだけいじってみよう（開発のお作法）
Next.jsの開発には「お作法」があります。
それは、「ページ（page.tsx）」と「部品（components）」を分けて考えるということです。
ページが増える仕組み
Next.js（App Router）では、フォルダ構成がそのままURLになります。
試しに、src/app フォルダの中に contact というフォルダを作り、その中に page.tsx というファイルを作ってみてください。
// src/app/contact/page.tsx
export default function Contact() {
return この画面はお問い合わせページです;
}これだけで、http://localhost:3000/contact というページが自動的に誕生します。
「フォルダを作って page.tsx を置く」。これがNext.jsで画面を増やすのが基本ルールです。
また、例えば、このお問い合わせページに項目数の多い入力フォームを作る場合は、src/componentsというフォルダを作り、ContactForm.tsxのようなファイルを作って入力フォームだけ外だしするような書き方もできます。
いわゆる部品化です。
問い合わせフォームの場合はメリットが少ないですが、データ登録画面とデータ編集画面を作るような場合はこの部品を各画面で使えます。
例えばこんな感じです。
src/app/data/new/page.tsx // 登録画面（DataForm.tsxを読み込む）
src/app/data/edit/page.tsx // 編集画面（DataForm.tsxと登録済みデータを読み込んで初期表示）
src/app/components/DataForm.tsx // データ入力フォームこの他にもsrc/typesにデータモデルを置いたり、src/libに共通パーツを置いたりなど人によって整理の方法が変わります。
このあたりは好みもあるので、慣れてきたら自分流にするのがいいですが、とりあえずテンプレが欲しい方は私の過去記事におすすめ構成を紹介してます。
お時間があればそちらを確認してみてください。
プログラミングを始める前に
これから少し中身を書き換えますが、今回使用する言語は、TypeScript です。
以前の記事でも少し紹介しましたが、TypeScript は JavaScript に以下を追加したような言語です。
- 型（number, string, object など）
- エラーの事前検知
- 開発効率UPの補助
今回使うフレームワーク（Next.js）は、標準で TypeScript をサポートしていて、とても相性がいいです。
ただ、使いながらでないと相性の理解が難しいと思うので、ここではざっと技術的な利便性のみ紹介します。
以下を実感できるようになるころには中級者になっているはずです。
- Next.js の中で書くコードはほぼ全て TypeScript で書ける
- Next.js のページ、API、コンポーネント、すべて ts/tsx で運用できる
- TypeScript の型が Next.js のAPI構造やデータ構造を便利にしてくれる
簡単ににtsとtsxの違いに触れておきます。
どちらも TypeScript の拡張子であることに変わりはありませんが、用途が違います。
✅ .tsx ：画面表示を伴う処理で使用（<div>のようなタグで画面の要素を記述できます）
✅ .ts ：型の定義やDBアクセス処理、APIなど画面表示を伴わない処理で使用
中身を書き換えてみよう
トップページである src/app/page.tsx を開いて、return の中身を全部消して書き換えてみましょう。
// src/app/contact/page.tsx
export default function Contact() {
return (
<main className="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-6">
{/* フォーム全体を囲むカード */}
<div className="w-full max-w-md bg-white p-8 rounded-xl shadow-lg border border-gray-200">
<h1 className="text-2xl font-bold text-gray-800 mb-6 text-center">
お問い合わせ
</h1>
{/* 入力エリア（見た目だけ） */}
<div className="space-y-4">
{/* お名前 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
お名前
</label>
<input
type="text"
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
placeholder="山田 太郎"
/>
</div>
{/* メールアドレス */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
メールアドレス
</label>
<input
type="email"
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none"
placeholder="example@mail.com"
/>
</div>
{/* 内容 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
お問い合わせ内容
</label>
<textarea
className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 outline-none h-32"
placeholder="ここに内容を入力してください"
></textarea>
</div>
{/* 送信ボタン（処理なし） */}
<button className="w-full bg-blue-600 text-white font-bold py-3 rounded-lg hover:bg-blue-700 transition">
送信する
</button>
</div>
</div>
</main>
);
}Chrome を確認してみてください。保存した瞬間、ブラウザの画面が変わりましたよね？
このサクサク感が、モダン開発の醍醐味です。
まとめ：次は「デザイン」を整えよう
今回はNext.jsのセットアップを行いました。
- Next.jsは、「便利な建材」と「ハイテク工具」の詰め合わせセット。
npx create-next-appで、Git設定も含めた土台が一瞬で作れる。- ページを増やしたければ、フォルダを作って
page.tsxを置く。
しかし、今のままでは画面が真っ白で味気ないですよね。
「でもデザインセンスないし、CSSを書くのは面倒くさい…」
そんなあなたのためのツールが、今回インストールの質問にも出てきた「Tailwind CSS」と、最近流行りの「shadcn/ui」です。
次回は、これらを使って、プロっぽいデザインのボタンやカードを一瞬で作る方法を解説します。