> ## Documentation Index
> Fetch the complete documentation index at: https://atsushiishida.com/llms.txt
> Use this file to discover all available pages before exploring further.

# プロジェクトを作ろう

> Next.jsプロジェクトの作成方法と初期設定オプションの詳細解説

## はじめに

Next.js は、React ベースのフルスタックフレームワークです。このガイドでは、`create-next-app`を使用して Next.js プロジェクトを作成する方法と、各設定オプションの意味について詳しく解説します。

## create-next-app とは

`create-next-app`は、Next.js プロジェクトを簡単にセットアップするための公式ツールです。必要な依存関係のインストール、プロジェクト構造の作成、TypeScript や ESLint などの設定を自動で行います。

### バージョン確認

プロジェクトを作成する前に、`create-next-app`の最新バージョンを確認することをお勧めします：

```bash theme={null}
$ npm info create-next-app

create-next-app@15.4.4 | MIT | deps: none | versions: 2782
Create Next.js-powered React apps with one command
https://github.com/vercel/next.js#readme
```

## プロジェクトの作成

特定のバージョンを指定してプロジェクトを作成します：

```bash theme={null}
$ npx create-next-app@15.4.4
Need to install the following packages:
create-next-app@15.4.4
Ok to proceed? (y) y

✔ What is your project named? … nextjs-perfect-guide
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in /Users/ham/tmp/nextjs-perfect-guide.

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- @eslint/eslintrc


added 306 packages, and audited 307 packages in 17s

132 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created nextjs-perfect-guide at /Users/ham/tmp/nextjs-perfect-guide
```

## 各設定オプションの詳細解説

プロジェクト作成時に表示される各質問について、詳しく解説します。

### 1. プロジェクト名の設定

> ✔ What is your project named? … nextjs-perfect-guide

**説明：** プロジェクトのディレクトリ名と package.json の name フィールドに使用されます。

**推奨事項：**

* 小文字とハイフンを使用（例：my-next-app）
* スペースや特殊文字は避ける
* 意味のある分かりやすい名前を選ぶ

### 2. TypeScript の使用

> ✔ Would you like to use TypeScript? … No / Yes

**選択：** Yes（デフォルト）

**TypeScript とは：** JavaScript に静的型付けを追加した言語です。

**Yes を選ぶメリット：**

* 型安全性によるバグの早期発見
* IDE での優れた自動補完とリファクタリング機能
* 大規模プロジェクトでの保守性向上
* Next.js の型定義が自動で設定される

**初心者へのアドバイス：** TypeScript を学習中でも、Yes を選択することをお勧めします。段階的に型を追加していけば良く、最初は JavaScript のように書いても問題ありません。

### 3. ESLint の使用

> ✔ Would you like to use ESLint? … No / Yes

**選択：** Yes（デフォルト）

**ESLint とは：** JavaScript と TypeScript のコード品質を保つためのツールです。

**Yes を選ぶメリット：**

* コーディング規約の自動チェック
* 潜在的なバグの検出
* コードの一貫性を保つ
* Next.js 専用のルールが自動設定される

**使い方：** `npm run lint`でチェック、`npm run lint -- --fix`で自動修正

### 4. Tailwind CSS の使用

> ✔ Would you like to use Tailwind CSS? … No / Yes

**選択：** No（このガイドでは Next.js の学習に集中するため）

**Tailwind CSS とは：** ユーティリティファーストの CSS フレームワークです。

**Yes を選ぶ場合のメリット：**

* クラス名を組み合わせてスタイリング
* CSS ファイルを書く必要が減る
* レスポンシブデザインが簡単

**No を選ぶ場合：**

* 通常の CSS や CSS Modules を使用
* Next.js の基本機能の学習に集中できる
* 後からでも追加可能

### 5. src ディレクトリの使用

> ✔ Would you like your code inside a `src/` directory? … No / Yes

**選択：** No（デフォルト）

**違いの説明：**

* **No：** app ディレクトリがプロジェクトルートに配置
* **Yes：** src ディレクトリ内に app ディレクトリが配置

**No を選ぶ理由：**

* シンプルな構造で始められる
* 公式ドキュメントの多くがこの構造を採用
* 小〜中規模プロジェクトには十分

**Yes を検討すべき場合：**

* 設定ファイルとソースコードを明確に分離したい
* 大規模プロジェクトでの整理整頓

### 6. App Router の使用

> ✔ Would you like to use App Router? (recommended) … No / Yes

**選択：** Yes（デフォルト・強く推奨）

**App Router とは：** Next.js 13 で導入された新しいルーティングシステムです。

**Yes を選ぶ理由：**

* React Server Components のサポート
* より直感的なレイアウトシステム
* 改善されたデータフェッチング
* 最新の Next.js 機能をフル活用可能
* 今後の標準となる設計

**Pages Router との違い：**

* App Router：`app/`ディレクトリを使用（新しい）
* Pages Router：`pages/`ディレクトリを使用（従来型）

### 7. Turbopack の使用

> ✔ Would you like to use Turbopack for `next dev`? … No / Yes

**選択：** Yes（推奨）

**Turbopack とは：** Rust で書かれた次世代のバンドラーで、Webpack の後継として開発されています。

**Yes を選ぶメリット：**

* 開発サーバーの起動が高速（最大 10 倍）
* ホットリロードが瞬時に反映
* インクリメンタルビルドによる効率的な再ビルド
* 大規模プロジェクトでも快適な開発体験

**注意点：**

* 開発環境（`next dev`）でのみ使用される
* 本番ビルド（`next build`）は引き続き Webpack を使用
* 一部の Webpack プラグインとの互換性に制限がある場合がある

### 8. インポートエイリアスのカスタマイズ

> ✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

**選択：** No（デフォルト）

**インポートエイリアスとは：** 相対パスの代わりに使える短縮記法です。

**デフォルトの動作（No を選んだ場合）：**

```typescript theme={null}
// 相対パスの代わりに
import Button from "../../../components/Button";

// エイリアスを使用
import Button from "@/components/Button";
```

**`@/*`の意味：**

* `@`：プロジェクトルートを表す
* `/*`：その配下のすべてのパス

**Yes を選ぶ場合：**

* 独自のエイリアス（例：`~/`、`#/`）を設定可能
* 複数のエイリアスを設定可能

## まとめ

これらの設定により、モダンな Next.js プロジェクトの基盤が整います。すべてのオプションは後から変更可能なので、まずはデフォルト設定で始めて、必要に応じて調整していくことをお勧めします。