2026.01.14

【2026年版】Next.jsで始めるReact開発環境の構築方法 – 最速セットアップガイド

yuya_react

はじめに

こんにちは、優也@月収100万を目指して月100時間勉強する男です。

これまでViteを使ってReactアプリを作ってきましたが、今回はNext.jsでの環境構築方法を解説します。

Next.jsは、Reactをベースにした最強のフレームワークです。サーバーサイドレンダリング、ルーティング、API機能など、Reactにはない強力な機能が標準で搭載されています。

2025年現在、本格的なWebアプリ開発ならNext.js一択と言っても過言ではありません。この記事では、完全初心者でも迷わないように、Next.jsの環境構築手順を丁寧に解説します。

Next.jsとは?

Next.jsは、Reactアプリを簡単に作るためのフレームワークです。Vercel社が開発・メンテナンスしています。

Next.jsの特徴

🚀 高速なページ表示: サーバーサイドレンダリング(SSR)に対応
📁 ファイルベースルーティング: フォルダ構造でページを作れる
🎨 画像最適化: 自動で画像を最適化
🔧 API Routes: バックエンド機能も実装可能
⚡ 高速リロード: 開発体験が最高

ViteとNext.jsの違い

項目	Vite	Next.js
用途	シンプルなReactアプリ	本格的なWebアプリ
ルーティング	自分で実装	標準搭載
SSR	非対応	標準搭載
API開発	別途必要	標準搭載
学習コスト	低い	中程度
デプロイ	どこでもOK	Vercelが最適

使い分け:

学習・練習: Vite
本格的なアプリ: Next.js

必要な環境

Next.jsを使うにはNode.js 18.17以上が必要です。

確認方法

node -v

node -v

バージョンが表示されればOKです。例: v20.10.0

インストールしていない場合は、Node.js公式サイトからLTS版をダウンロードしてください。

Next.jsプロジェクトを作成

それでは実際にプロジェクトを作成していきましょう。

Step 1: プロジェクトの作成

ターミナルを開いて、以下のコマンドを実行します:

npx create-next-app@latest
```

### Step 2: 対話形式での設定

コマンドを実行すると、いくつか質問されます:

**1. プロジェクト名を入力**
```
What is your project named? › my-next-app
```
好きな名前を入力してEnter。ここでは`my-next-app`とします。

**2. TypeScriptを使うか?**
```
Would you like to use TypeScript? › No / Yes
```
最初は`No`を選択(矢印キーで選んでEnter)

**3. ESLintを使うか?**
```
Would you like to use ESLint? › No / Yes
```
`Yes`を選択(コード品質チェックツール)

**4. Tailwind CSSを使うか?**
```
Would you like to use Tailwind CSS? › No / Yes
```
`Yes`を選択(スタイリングが簡単になる)

**5. srcディレクトリを使うか?**
```
Would you like to use `src/` directory? › No / Yes
```
`Yes`を選択(ファイル整理がしやすい)

**6. App Routerを使うか?**
```
Would you like to use App Router? (recommended) › No / Yes
```
`Yes`を選択(最新のルーティング方式)

**7. importエイリアスをカスタマイズするか?**
```
Would you like to customize the default import alias (@/*)? › No / Yes

Noを選択(デフォルトでOK)

npx create-next-app@latest
```

### Step 2: 対話形式での設定

コマンドを実行すると、いくつか質問されます:

**1. プロジェクト名を入力**
```
What is your project named? › my-next-app
```
好きな名前を入力してEnter。ここでは`my-next-app`とします。

**2. TypeScriptを使うか?**
```
Would you like to use TypeScript? › No / Yes
```
最初は`No`を選択(矢印キーで選んでEnter)

**3. ESLintを使うか?**
```
Would you like to use ESLint? › No / Yes
```
`Yes`を選択(コード品質チェックツール)

**4. Tailwind CSSを使うか?**
```
Would you like to use Tailwind CSS? › No / Yes
```
`Yes`を選択(スタイリングが簡単になる)

**5. srcディレクトリを使うか?**
```
Would you like to use `src/` directory? › No / Yes
```
`Yes`を選択(ファイル整理がしやすい)

**6. App Routerを使うか?**
```
Would you like to use App Router? (recommended) › No / Yes
```
`Yes`を選択(最新のルーティング方式)

**7. importエイリアスをカスタマイズするか?**
```
Would you like to customize the default import alias (@/*)? › No / Yes

Noを選択(デフォルトでOK)

Step 3: インストール完了を待つ

必要なパッケージが自動的にインストールされます(1-2分かかります)。

プロジェクトを起動

Step 1: ディレクトリに移動

cd my-next-app

cd my-next-app

Step 2: 開発サーバーを起動

npm run dev
```

成功すると、以下のような表示が出ます:
```
▲ Next.js 14.0.0
- Local:        http://localhost:3000
- Ready in 1.5s
```

npm run dev
```

成功すると、以下のような表示が出ます:
```
▲ Next.js 14.0.0
- Local:        http://localhost:3000
- Ready in 1.5s
```

Step 3: ブラウザで確認

ブラウザで http://localhost:3000 を開いてください。

Next.jsのウェルカム画面が表示されれば成功です!🎉

プロジェクト構造の理解

作成されたプロジェクトのフォルダ構造を見てみましょう:

my-next-app/
├── node_modules/ # 依存パッケージ(触らない)
├── public/ # 静的ファイル(画像など)
├── src/
│ └── app/ # ページとレイアウト
│ ├── favicon.ico
│ ├── globals.css # グローバルスタイル
│ ├── layout.js # 共通レイアウト
│ └── page.js # トップページ
├── .eslintrc.json # ESLint設定
├── .gitignore # Git除外設定
├── next.config.js # Next.js設定
├── package.json # プロジェクト設定
├── postcss.config.js # PostCSS設定
└── tailwind.config.js # Tailwind設定

重要なファイル

src/app/page.js – トップページ

export default function Home() {
  return (
    <main>
      <h1>Hello Next.js!</h1>
    </main>
  );
}

export default function Home() {
  return (
    <main>
      <h1>Hello Next.js!</h1>
    </main>
  );
}

このファイルを編集すると、トップページの内容が変わります。

src/app/layout.js – 共通レイアウト

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

すべてのページで共通のレイアウトを定義します。

Hello Worldを表示してみる

実際にコードを編集してみましょう。

Step 1: page.js を開く

src/app/page.jsを開きます。

Step 2: コードを書き換える

既存のコードをすべて削除して、以下のコードに書き換えます:

export default function Home() {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <p>Next.jsで作った最初のページです。</p>
    </div>
  );
}

export default function Home() {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <p>Next.jsで作った最初のページです。</p>
    </div>
  );
}

Step 3: 保存して確認

ファイルを保存(Ctrl + S)すると、自動的にブラウザが更新されます。

「Hello, Next.js!」と表示されればOKです!

App Routerとは?

Next.js 13から導入されたApp Routerは、新しいルーティング方式です。

フォルダ構造でページを作る

src/app/
├── page.js → / (トップページ)
├── about/
│ └── page.js → /about
└── blog/
└── page.js → /blog

フォルダを作ってpage.jsを置くだけで、自動的にページができます!

実際にページを作ってみる

aboutページを作成:

src/app/の中にaboutフォルダを作成
その中にpage.jsを作成
以下のコードを記述:

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>これはAboutページです。</p>
    </div>
  );
}

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>これはAboutページです。</p>
    </div>
  );
}

ブラウザでhttp://localhost:3000/aboutを開く

ページが表示されれば成功です!

よく使うコマンド

Next.js開発でよく使うコマンドをまとめます:

開発サーバーの起動

npm run dev

npm run dev

開発中はずっとこのコマンドを実行したままにします。

開発サーバーの停止

ターミナルでCtrl + Cを押します。

ホットリロードが効かない

ファイルを保存しているか確認
開発サーバーが起動しているか確認
ダメならサーバーを再起動(Ctrl + C → npm run dev)

まとめ

Next.jsを使った開発環境の構築方法を解説しました。

手順のおさらい:

Node.jsをインストール
npx create-next-app@latestでプロジェクト作成
質問に答えて設定
npm run devで開発サーバー起動

Next.jsの特徴:

🚀 サーバーサイドレンダリング
📁 ファイルベースルーティング
⚡ 高速な開発体験
🔧 API機能も実装可能

ViteとNext.jsの使い分け:

学習・練習: Vite
本格的なアプリ: Next.js

Next.jsを使えば、より実践的なWebアプリケーションが作れます。次回以降の記事で、Next.jsを使った実際のアプリ開発を解説していきます!

関連記事:

あとがき

月100時間の学習時間の中で、今月はReactに集中して取り組んでいます。Instagramでは、フリーランスとして月収100万円を目指す道のりを、リアルタイムで発信していきますので、ぜひフォローしてください!

Instagram: @hooded_yuya_100man

ABOUT ME