Next.jsのセットアップ

🚀Next.jsのセットアップ

実行環境の確認

Next.jsプロジェクトを始めるには、Node.jsがPCにインストールされている必要があります。

Node.jsのバージョン要件

推奨バージョン: Node.js 18.17以上
最低バージョン: Node.js 18.0以上
推奨: LTS（Long Term Support）バージョンを使用することを強く推奨します

重要: Node.jsのバージョン要件は、Next.jsのバージョンやプロジェクトの要件によって異なる場合があります。適宜、ユーザー自身で最新の要件を確認してください。

バージョンの確認方法

現在インストールされているNode.jsのバージョンを確認するには、以下のコマンドを実行してください。

node --version

LTSバージョンについて

**LTS（Long Term Support）**は、長期サポート版のことで、安定性とセキュリティアップデートが保証されています。本番環境や重要なプロジェクトでは、LTSバージョンの使用を強く推奨します。

Node.jsのインストール・更新

バージョンが古い場合や、Node.jsがインストールされていない場合は、以下の手順でインストール・更新してください。

Node.js公式サイトにアクセス
LTSバージョンをダウンロード（推奨）
インストーラーを実行してインストール
インストール後、再度node --versionコマンドでバージョンを確認

注意: 古いバージョンのNode.jsを使用している場合、Next.jsのセットアップ時にエラーが発生する可能性があります。必ず最新のLTSバージョンを使用することをおすすめします。

1. プロジェクトの作成

プロジェクトを作成したいディレクトリで、以下のコマンドを実行します。

npx create-next-app@latest

コマンドの動作

このコマンドを実行すると、対話形式で設定に関する質問が順に表示されます。各質問に対してYesまたはNoで回答することで、プロジェクトの初期設定を行います。

2. 設定項目の説明とおすすめ設定

以下の表に、各設定項目の説明と初心者向けのおすすめ設定をまとめています。

設定項目	説明	おすすめ設定	理由
プロジェクト名	プロジェクトのディレクトリ名	`my-next-app` など任意	プロジェクトの内容を表す名前を付けましょう
TypeScriptの利用	型安全性を提供する言語	✅ Yes	大規模なアプリケーションでコードの信頼性を高めます。エラーを早期に発見できるため、初心者にもおすすめです
ESLintの利用	コードの品質をチェックするツール	✅ Yes	コードのバグや不適切な記述を自動で検出します。チーム開発でも重要です
Tailwind CSSの利用	ユーティリティファーストのCSSフレームワーク	✅ Yes	迅速なUI開発が可能です。スタイリングが簡単で、モダンな開発で広く使われています
src/ディレクトリの利用	コードを`src/`ディレクトリにまとめる	✅ Yes	プロジェクト構造が整理され、管理しやすくなります
App Routerの利用	Next.js 13以降の新しいルーティングシステム	✅ Yes	現在の主流です。サーバーコンポーネントなどの新機能が使えます
インポートエイリアスの設定	`@/components`のような絶対パスでインポート	✅ Yes	相対パス（`../../components`）よりも読みやすく、保守しやすいコードになります

💡 初心者向けの推奨設定まとめ

迷ったら、以下の設定で進めることをおすすめします：

✅ TypeScript: Yes
✅ ESLint: Yes
✅ Tailwind CSS: Yes
✅ src/ディレクトリ: Yes
✅ App Router: Yes
✅ インポートエイリアス: Yes

これらの設定は、モダンなNext.js開発の標準的な構成です。特に理由がない限り、すべてYesを選択することで、最新の機能とベストプラクティスを活用できます。

各設定項目の詳細

プロジェクト名

プロジェクトのディレクトリ名を入力します。英数字とハイフン（-）が使用できます。

例: my-next-app, blog-app, portfolio-site

TypeScriptの利用

TypeScriptを使用すると、型安全性によりコードの信頼性が向上します。

✅ Yes（推奨）: 型チェックにより、エラーを早期に発見できます
❌ No: JavaScriptで開発します（既存のJavaScriptプロジェクトを移行する場合など）

ESLintの利用

ESLintは、コードの品質を自動でチェックするツールです。

✅ Yes（推奨）: コードのバグや不適切な記述を自動で検出します
❌ No: ESLintを使用しません（後から設定することも可能）

Tailwind CSSの利用

Tailwind CSSは、ユーティリティクラスを使用してスタイリングを行うCSSフレームワークです。

✅ Yes（推奨）: 迅速なUI開発が可能で、モダンな開発で広く使われています
❌ No: 通常のCSSや他のCSSフレームワークを使用します

src/ディレクトリの利用

すべてのアプリケーションコードをsrc/ディレクトリにまとめます。

✅ Yes（推奨）: プロジェクト構造が整理され、管理しやすくなります
❌ No: ルートディレクトリに直接ファイルを配置します

App Routerの利用

Next.js 13以降で導入された、新しいルーティングシステムです。

✅ Yes（推奨）: 現在の主流です。サーバーコンポーネントなどの新機能が使えます
❌ No: 従来のPages Router（pages/ディレクトリ）を使用します

インポートエイリアスの設定

@/componentsのような絶対パスでモジュールをインポートできるようにします。

✅ Yes（推奨）: 相対パス（../../components）よりも読みやすく、保守しやすいコードになります
❌ No: 相対パスでインポートします

3. 開発サーバーの起動

プロジェクトの作成が完了したら、以下の手順で開発サーバーを起動します。

手順1: プロジェクトディレクトリに移動

作成したプロジェクトのディレクトリに移動します。

cd my-next-app

注意: my-next-appは、プロジェクト作成時に指定したプロジェクト名に置き換えてください。

手順2: 開発サーバーを起動

以下のコマンドを実行して、開発サーバーを起動します。

npm run dev

動作の確認

コマンドを実行すると、以下のようなメッセージが表示されます：

  ▲ Next.js 14.x.x
  - Local:        http://localhost:3000
  - Ready in 2.3s

ブラウザで確認

表示されたURL（通常はhttp://localhost:3000）をブラウザで開くと、作成したアプリケーションを確認できます。

ホットリロード機能

開発サーバーが起動している間、コードを変更すると自動的にブラウザがリロードされます。これにより、変更内容をすぐに確認でき、開発がスムーズに進みます。

開発サーバーの停止

開発サーバーを停止するには、ターミナルでCtrl + C（Macの場合はCmd + C）を押します。

4. プロジェクト構造の確認

プロジェクトが正常に作成されると、以下のような構造になります（App Routerを使用した場合）：

my-next-app/
├── app/                    # App Routerのディレクトリ
│   ├── layout.tsx         # レイアウトコンポーネント
│   ├── page.tsx           # ホームページ
│   └── globals.css        # グローバルスタイル
├── public/                 # 静的ファイル（画像など）
├── src/                    # ソースコード（src/ディレクトリを使用した場合）
├── .eslintrc.json         # ESLintの設定
├── next.config.js         # Next.jsの設定ファイル
├── package.json           # プロジェクトの依存関係
├── tsconfig.json          # TypeScriptの設定（TypeScriptを使用した場合）
└── tailwind.config.ts     # Tailwind CSSの設定（Tailwindを使用した場合）

まとめ

✅ Node.js 18.17以上をインストール
✅ npx create-next-app@latestでプロジェクトを作成
✅ 推奨設定（TypeScript、ESLint、Tailwind CSS、App Routerなど）を選択
✅ npm run devで開発サーバーを起動
✅ http://localhost:3000でアプリケーションを確認

これで、Next.jsの開発環境が整いました！🎉