ティーポットを開いて準備開始｜第2回 Next.js入門

著者: 管理者 / 2025-08-17 (更新: 2025-08-17)

先生〜！前回のお話、とても分かりやすくて感激いたしましたわ☕️✨
わたくし、Next.jsに少しずつ親しみを感じてまいりましたの。
今日は、実際に触ってみたいですわ！

素晴らしい意欲ですね。
では今回は、Next.jsの「プロジェクトを立ち上げる」方法と、基本のフォルダ構成についてご案内しましょう。
ちょうどお茶会の準備を整えるような段階ですね。

まあ……お茶会の準備ですのね。カップを並べたり、お菓子をお皿に盛り付けたり……✨
Next.jsでも、そんな支度が必要なのですの？

ええ、その通りです。Next.jsは便利な道具が揃っていますが、最初に「プロジェクト」というお家を建ててから、その中に家具を並べていくイメージです。

前回の記事ティータイムで巡るWebの世界｜第1回 Next.js入門

📝 Next.js プロジェクトの作成方法

Next.jsでは公式の便利なコマンドが用意されています。

Node.js をインストール
- Next.jsを使うためには Node.js が必要です（推奨バージョン18以上）。
新しいプロジェクトを作る

npx create-next-app@latest my-app

これで my-app フォルダの中に、Next.jsの基本セットが作られます。

開発サーバーを起動する

cd my-app
npm run dev

これで http://localhost:3000 を開くと、Next.jsのウェルカムページが表示されます。

まあ！`npx create-next-app` だけでお家が建ってしまうなんて、便利ですわね〜！✨
Reactのときよりも、最初から整っている感じがいたしますわ。

ええ。Reactでは手動でいろいろ準備する必要がありましたが、Next.jsは「最初からキッチンも家具も揃ったモデルルーム」のように整っています。
だからこそ、すぐに開発に集中できるのです。

📝 Next.jsのフォルダ構成（基本）

作成されたプロジェクトの中身を少しのぞいてみましょう。

my-app/
├── pages/         ← ページを置くフォルダ
│   └── index.js   ← トップページ
├── public/        ← 画像や静的ファイル
├── styles/        ← CSSやスタイル関連
├── package.json   ← プロジェクト情報

pages/
ファイル名がそのままURLになります。
例：about.js → /about
public/
画像やフォントを置いて、/images/sample.png のように直接参照できます。
styles/
CSSを管理する場所。
package.json
使用するライブラリやスクリプトの情報。

なるほど……つまり、`pages` が間取りのお部屋、`public` が食器棚、`styles` がカーテンやクロスのようなものですわね。
こうしておくと、お家の中で迷わずに済むのですのね。

お見事な例えですね。まさにその通りです。
Next.jsでは、この分かりやすいルールに従うことで、誰が見ても整理されたプロジェクトになります。

📝 実際にページを追加してみる

例えば、新しく「自己紹介ページ」を作りたいときは、pages/about.js を作ります。

export default function About() {
  return <h1>わたくしの自己紹介ページですわ！</h1>
}

これで http://localhost:3000/about にアクセスすれば、すぐにページが表示されます。

まあ〜！たった一枚の紙を加えるだけで、新しいお部屋が増えるなんて素敵ですわね💕
とてもわかりやすくて、安心いたしましたわ。

その調子です。Next.jsでは「ページを置く＝部屋を増やす」というシンプルなルールがあるので、初学者でも迷わず進めます。
次回は、このページ同士を「リンク」でつなぎ、実際にお屋敷を歩き回れるようにしてみましょう。

✅ 本日のまとめ

npx create-next-app でNext.jsのプロジェクトを一瞬で作成できる
npm run dev で開発サーバーを起動し、http://localhost:3000 にアクセス
基本のフォルダ構成
- pages = ページ置き場（ファイル名＝URL）
- public = 静的ファイル（画像など）
- styles = CSS関連
ページを追加するのは簡単、pages にファイルを置くだけ