開発環境のセットアップ

この章では、Next.jsの開発環境をゼロから構築します。必要なツールのインストールから、プロジェクトの作成、開発サーバーの起動までを一通り行います。

学習者

環境構築って最初の難関だよね…。Next.jsって何から入れればいいの？

前提条件

Next.jsを使うには、以下のツールが必要です：

• Node.js 18.17以降（LTS推奨）
• npm、yarn、または pnpm（パッケージマネージャー）

Node.jsがインストールされているか確認するには、ターミナルで以下のコマンドを実行してください：

node -v
# v20.11.0 のように表示されればOK
 
npm -v
# 10.2.4 のように表示されればOK

プロジェクトの作成

create-next-app を使って新しいプロジェクトを作成します。ターミナルで以下を実行してください：

npx create-next-app@latest my-first-app

対話形式でいくつかの質問が表示されます。以下の設定を推奨します：

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for next dev? … Yes
✔ Would you like to customize the import alias? … No

Turbopack はNext.jsに組み込まれたRust製の高速バンドラーです。詳しくは次章「バンドラーとビルドツール」で解説します。

ディレクトリ構成

プロジェクトが作成されると、以下のようなディレクトリ構成になります：

my-first-app/
├── src/
│   └── app/
│       ├── layout.tsx    ← ルートレイアウト
│       ├── page.tsx      ← トップページ
│       └── globals.css   ← グローバルスタイル
├── public/               ← 静的ファイル
├── next.config.ts        ← Next.js設定
├── package.json
└── tsconfig.json

特に重要なのは src/app/ ディレクトリです。ここに配置するファイルが、そのままアプリケーションのルーティングに対応します。

学習者

app/ の中のファイルがそのままURLになる…？その仕組み、早く知りたいかも。

この「フォルダ＝URL」の仕組みは、第4章「ルーティングとページ」で詳しく扱います。

開発サーバーの起動

プロジェクトのディレクトリに移動して、開発サーバーを起動しましょう：

cd my-first-app
npm run dev

ターミナルに以下のような出力が表示されれば成功です：

   ▲ Next.js 15.x.x
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.x:3000

 ✓ Starting...
 ✓ Ready in 2.1s

ブラウザで http://localhost:3000 にアクセスすると、Next.jsのウェルカムページが表示されます。

ログが2回出るのはStrict Modeの仕様

学習者

コンポーネントに console.log を書いたら、ブラウザのコンソールに同じログが2回出たんだけど、バグ？

バグではありません。Next.jsのApp Routerでは、ReactのStrict Modeが既定で有効になっているためです（Next.js 13.5.1以降。reactStrictMode — Next.js公式ドキュメント）。

Strict Modeが有効だと、Reactは開発環境でだけ次の処理を余分に1回実行します。

• コンポーネント関数（レンダー）
• useEffect のセットアップとクリーンアップ

そのため、Client Componentに書いた console.log や useEffect のログが2回出ます。npm run build で作る本番ビルドでは、余分な実行は起きません。

なぜわざと2回実行するのか、2回実行されて困るときに何を見直せばよいかは、Reactの本の「Strict Modeで2回実行されるのはなぜ」で説明しています。

reactStrictModeで切り替える

Strict Modeは next.config.ts の reactStrictMode で切り替えます。App Routerでは何も書かなければ有効なので、設定が必要になるのは無効にしたいときです。

// next.config.ts
import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  reactStrictMode: false, // Strict Modeを無効にする
};
 
export default nextConfig;

Next.js公式ドキュメントは、Strict Modeを有効にしておくことを強く推奨しています。2回実行で表示や動作がおかしくなる場合、無効にする前に useEffect のクリーンアップが書けているかを確認しましょう。

package.json のスクリプト

package.json には、よく使うコマンドが定義されています：

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

まとめ

この章では以下のことを行いました：

• Node.js 18.17以降を用意し、create-next-app でApp Router構成のプロジェクトを作成する
• create-next-app でプロジェクトを作成
• ディレクトリ構成の理解
• 開発サーバーの起動
• 開発中にログが2回出るのはStrict Modeの仕様（reactStrictMode で切り替え）

次の章では、Next.jsのコンポーネントシステム（Server Components と Client Components）について学びます。