Skip to main content

​
はじめに

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

​
create-next-app とは

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

​
バージョン確認

プロジェクトを作成する前に、create-next-appの最新バージョンを確認することをお勧めします： 
$ 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

​
プロジェクトの作成

特定のバージョンを指定してプロジェクトを作成します： 
$ 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 を選んだ場合）： 
// 相対パスの代わりに
import Button from "../../../components/Button";

// エイリアスを使用
import Button from "@/components/Button";
@/*の意味：
  • @：プロジェクトルートを表す
  • /*：その配下のすべてのパス
Yes を選ぶ場合：
  • 独自のエイリアス（例：~/、#/）を設定可能
  • 複数のエイリアスを設定可能

​
まとめ

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