ReactからNext.jsへ！Learn Next.js日本語解説第1回

これまでReactの基礎（コンポーネント、Props、useState、useEffect、React Routerなど）を記事にして学んできました。

今回は次のステップとしてついにNext.jsに挑戦してみます。

学習にあたってVercel公式の体験型教材「Learn Next.js」に取り組んでみたのですが、内容は素晴らしいものの英語ベースということもあり、最初は少しハードルが高く感じられました。

そこで、同じようにReactの基礎を終えてNext.jsへステップアップしたいと考えている方向けに、Learn Next.jsの内容を自分なりにわかりやすく日本語でまとめ直しながら進めていく連載をスタートします！

本連載で作成する「財務ダッシュボードアプリ」
- コース全体で学べるトピック概要
1. 必要な開発環境と事前準備
- 開発環境による違い
- 現在の環境・バージョン確認コマンド
2. プロジェクト作成コマンド解説
- コマンドの分解解説
3. 開発サーバー立ち上げコマンド解説
4. 生成されたディレクトリ構成解説
- 主要なディレクトリ・ファイルの深掘り解説
まとめと次回予告

本連載で作成する「財務ダッシュボードアプリ」

このチュートリアルを通じて、最終的に以下のような本格的なフルスタックWebアプリケーションを構築していきます。

Next.jsとReactで構築する財務ダッシュボードWebアプリケーションのUIイメージ図。売上グラフや請求書一覧テーブル、Next.jsとReactのロゴを配したモダンなインフォグラフィック。

公開用ホームページ
ログインページ
認証で保護された管理ダッシュボード
請求書（Invoice）のCRUD機能（追加・編集・削除）
PostgreSQLデータベース連携

コース全体で学べるトピック概要

スタイリング（Tailwind CSSやCSS Modulesの扱い方）
最適化（画像・フォント・Linkコンポーネントの最適化）
ルーティング（App Routerによるネストされたレイアウトとページ）
データ取得とデータベース（Vercel Postgresとストリーミング）
検索とページネーション（URL Search Paramsを活用した実装）
データ更新（React Server Actionsとキャッシュ再検証）
エラーハンドリング・アクセシビリティ・フォーム検証
認証（NextAuth.jsによるセキュリティ対策）
メタデータ（OGP設定やSEO対策）

1. 必要な開発環境と事前準備

Next.jsを始めるにあたり、まずはPCに適切な開発環境が整っているか確認しましょう。

Node.js（v18.17.0 以上が必要）
パッケージマネージャー（npm, pnpm, yarn など）
コードエディタ（VS Code や Cursor など）
ターミナル（Macのターミナル、WindowsのWSL2 / PowerShellなど）

自分のローカルPCはWindowsですが開発にはWSL2を利用しています。

開発環境による違い

1. ローカルWSL2

Node.js/Next.jsとの相性が抜群: Web開発のエコシステム（npm package、SWC、TurboPack等）はLinuxベースで最適化されています。
本番環境（Linux）との差がない: 本番のVercelやCloudflare Pages、VPS（Ubuntu）と同じ環境で動くため、「ローカルでは動いたのに本番でビルドエラーになる」というトラブルを防止できます。
VS Codeとの連携が強力: VS Codeの「WSL」拡張機能を使うと、Windows上のVS CodeからWSL内のLinuxファイルを直接操作でき、快適に開発可能です。

⚠️ 注意点（WSL2を高速に使うコツ）

プロジェクトのコードはWindows側のフォルダ（C:\Users\…）ではなく、WSL2内のホームディレクトリ（~/projects/ など）に保存して作成してください。Windows領域を跨ぐとファイル読み込み（I/O）が著しく遅くなります。

2. ローカルWindows（Native）

パス区切り文字（\ と /）やパーミッション（権限）の違い、C++ビルドツール（node-gyp など）の依存関係でエラーが出やすい傾向があります。
あえてNative Windowsで構築するメリットは少ないです。

【ハマりポイント】WSL2環境の方は「Linux側のNode.js」をセットアップしよう！

WindowsのWSL2（Ubuntu）環境で開発を行う場合、Windows側にインストールされたNode.jsを参照してしまうと、パーミッションエラー（`EPERM: operation not permitted`）などが発生してプロジェクトの作成に失敗することがあります。

実際に私も以下のようなコマンドでパスの不整合エラーが発生してしまいました。
# Windows側のNode.js（/mnt/c/...）が呼び出されてエラーになる例
which node
# -> （何も表示されない、または /mnt/c/Program Files/... と表示される）

WSL2環境で最も安全かつ標準的な解決策は、Linux側にバージョン管理ツールである nvm (Node Version Manager) を導入し、WSL2内部に専用のNode.js環境を構築することです。

WSL2開発環境におけるNode.js設定のNGパターンとOKパターンの比較図。Windows側のNode.jsを参照してEPERM権限エラーになるNG例と、nvmを使いLinux領域（/home/）内にNode.jsを構築して成功するOK例の解説。

以下にそのセットアップ手順をまとめました。

Step 1: nvm のインストール

ターミナル（WSL2）を開き、以下のコマンドで nvm をインストールします。

curl -o- 
https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh
raw.githubusercontent.com(https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh) | bash

インストール後、設定を反映させるために環境設定ファイルを再読み込みします。

source ~/.bashrc

nvm –version を実行し、バージョン番号が表示されればインストール成功です。

Step 2: Node.js (LTS版) のインストール

次に、nvm を使って現在推奨されているNode.jsのLTS（長期サポート）版をインストールします。

nvm install --lts

インストールが完了したら、Linux側のNode.jsとnpxが正しく参照されているかを確認します。

# コマンドの確認
which node
# 出力結果例: /home/username/.nvm/versions/node/v20.x.x/bin/node
which npx
# 出力結果例: /home/username/.nvm/versions/node/v20.x.x/bin/npx

出力結果のパスが /mnt/c/ Program Files/… ではなく、上記のように /home/…/.nvm/…（Linuxホーム配下）になっていれば準備完了です！

現在の環境・バージョン確認コマンド

ターミナルを開き、以下のコマンドを実行してNode.jsとnpmのバージョンを確認します。

# Node.jsのバージョン確認（v18.17.0以上であること）
node -v
# npmのバージョン確認
npm -v

2. プロジェクト作成コマンド解説

環境が整ったら、公式チュートリアル用のスタータープロジェクトを作成します。任意の作業用フォルダに移動して、以下のコマンドを実行してください。

npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-npm

コマンドの分解解説

npx create-next-app@latest:
Next.jsアプリを作成する公式CLIツールの最新版を呼び出します。
nextjs-dashboard:
作成されるプロジェクトのフォルダ名（ディレクトリ名）です。
–example “https://…”:
公式が提供しているLearn Next.js用のスターターコードを指定してダウンロードしています（必要なデザインや初期ファイルが用意されています）。
–use-npm:
パッケージマネージャーとして npm を明示的に指定して依存パッケージをインストールします。

実行途中で Need to install the following packages: create-next-app… と聞かれた場合は、y を入力して Enter を押してください。

3. 開発サーバー立ち上げコマンド解説

プロジェクトの作成が終わったら、作成されたディレクトリに移動して開発用サーバーを立ち上げます。

# 作成したプロジェクトディレクトリへ移動
cd nextjs-dashboard
# 開発サーバーの起動
npm run dev

ターミナルに以下のような出力が表示されれば起動完了です。

  ▲ Next.js 15.x.x
  - Local:        http://localhost:3000
  - Environments: .env
 ✓ Starting...
 ✓ Ready in 1.5s

ブラウザを開き、http://localhost:3000 にアクセスしてみてください。「Acme」のロゴが入った画面が表示されれば成功です！

4. 生成されたディレクトリ構成解説

実際に ls -a コマンドで確認できたプロジェクト直下の全ファイル・ディレクトリの解説です。

nextjs-dashboard/
├── .env.example          # 環境変数のサンプルファイル
├── .git/                 # Gitのリポジトリ情報（隠しフォルダ）
├── .gitignore            # Gitの管理除外設定ファイル
├── .next/                # ビルド結果やキャッシュが保存されるフォルダ（隠しフォルダ）
├── .npmrc                # npmの動作設定ファイル
├── README.md             # プロジェクトの説明ドキュメント
├── app/                  # ★【最重要】アプリケーションのメインコード（App Router）
├── next-env.d.ts         # Next.js用のTypeScript型定義ファイル
├── next.config.ts        # Next.js本体の設定ファイル（TypeScript形式）
├── node_modules/         # インストールされた外部ライブラリ群
├── package-lock.json     # npmの依存関係のロックファイル
├── package.json          # プロジェクト情報・使用ライブラリの管理ファイル
├── pnpm-lock.yaml        # pnpm用ロックファイル（スターター付属）
├── pnpm-workspace.yaml   # pnpm用ワークスペース設定ファイル（スターター付属）
├── postcss.config.js     # CSS処理ツール（PostCSS）の設定ファイル
├── public/               # 画像などの静的ファイル置き場
├── tailwind.config.ts    # Tailwind CSSの設定ファイル
└── tsconfig.json         # TypeScriptの設定ファイル

主要なディレクトリ・ファイルの深掘り解説

開発を進める上で「特に頻繁に触るもの」と「自動生成・設定用のもの」に分けて整理しておきます。

1. 最もよく触るメイン部分

app/ （最重要ディレクトリ）
Next.js（App Router）の中心となる場所です。この中に配置したフォルダ構造がそのままWebサイトのURL（ルーティング）になります。画面の表示（page.tsx）、共通レイアウト（layout.tsx）、UIコンポーネントやロジックは基本的にすべてこの中で作成します。
public/
画像やファビコン（favicon.ico）、フォントファイルなどの「静的ファイル」を配置する場所です。ここにあるファイルは、コード上から /hero-desktop.png のようなルートパスで直接参照できます。

2. アプリやスタイルの設定ファイル

next.config.ts
Next.js自体の動作をカスタマイズするための設定ファイルです。画像の外部ドメイン許可やリダイレクト設定などを記述します。（近年のNext.jsでは設定ファイルも .ts で書くのが標準になっています）
tailwind.config.ts & postcss.config.js
CSSフレームワーク「Tailwind CSS」の設定ファイルです。カスタムカラーの設定やフォントの拡張など、デザインシステムのカスタマイズを行う際に編集します。
tsconfig.json & next-env.d.ts
TypeScriptのコンパイル設定ファイルです。next-env.d.ts はNext.jsが自動生成する型定義ファイルなので、手動で編集する必要はありません。

3. パッケージ管理・環境変数関連

package.json & package-lock.json
プロジェクト名、実行コマンド（npm run dev など）、利用している外部ライブラリ（react, next 等）のバージョンが記載されています。
.env.example
データベース接続情報やAPIキーなどの「環境変数」の設定例が書かれたファイルです。実際に開発する際は、これをコピーして .env または .env.local を作成し、秘密鍵などを設定します。
.npmrc / pnpm-lock.yaml / pnpm-workspace.yaml
スターターコード側に用意されているパッケージマネージャー用の設定ファイルです。今回は –use-npm オプションで作成しているため、主に npm（package-lock.json）を使って依存関係が管理されます。

4. 自動生成・隠しフォルダ（触らなくてOK）

.next/
npm run dev で開発サーバーを起動したり、ビルドを実行した際に自動生成されるキャッシュ・出力用フォルダです。 Gitの管理対象外（.gitignore に記載）となっているため、手動でいじる必要はありません。
node_modules/
npm install によってダウンロードされたライブラリの実体が詰まっているフォルダです。サイズが大きいため、Git管理からは自動的に除外されます。

まとめと次回予告

今回はNext.jsを始めるための環境構築、プロジェクト作成、そして全体的なディレクトリ構造について解説しました。

次回（第2回）は、「CSSスタイリングとNext.jsにおけるフォント・画像の最適化」について解説していきます！

【Next.js入門第1回】公式チュートリアル「Learn Next.js」を日本語で徹底解説！環境構築からディレクトリ構成まで