Next.js: 環境構築とプロジェクト構造

# インタラクティブコマンド。いくつかの簡単な質問に答えるだけです
npx create-next-app@latest taskflow --ts --tailwind --app --src-dir --import-alias "@/*"

# スキャフォールドコマンドを実行
npx create-next-app@latest

? What is your project named?  taskflow
? Would you like to use TypeScript?  Yes / No
? Would you like to use ESLint?  Yes / No
? Would you like to use Tailwind CSS?  Yes / No
? Would you like to use `src/` directory?  Yes / No
? Would you like to use App Router? (recommended)  Yes / No
? Would you like to customize the import alias (`@/*` by default)?  No

# 本コース推奨オプション (全プロジェクトでこの設定を使用)
npx create-next-app@latest taskflow ^
  --typescript ^
  --eslint ^
  --tailwind ^
  --src-dir ^
  --app ^
  --import-alias "@/*"

# ============================================
# shophub という名前の新規プロジェクトを作成
# ============================================

npx create-next-app@latest shophub --ts --tailwind --app --src-dir

# コンソール出力
cd shophub
npm run dev

Creating a new Next.js project in C:\Users\Charlie\shophub.

✔ 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 to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the import alias? … @/*

Success! Created shophub at shophub
Inside that directory, you can run:
  npm run dev       # 開発サーバーを起動
  npm run build     # 本番バージョンをビルド
  npm start         # 本番サーバーを起動

Diagram: shophub/; src/; public/; Other Profiles; app/; app/globals.css.

// ============================================
// create-next-app デフォルトホームページ
// ============================================

import Image from "next/image";

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
        <Image
          className="dark:invert"
          src="/next.svg"
          alt="Next.js logo"
          width={180}
          height={38}
          priority
        />
        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
          <li className="mb-2">
            Get started by editing{" "}
            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
              src/app/page.tsx
            </code>
          </li>
          <li>Save and see your changes instantly.</li>
        </ol>
        <div className="flex gap-4 items-center flex-col sm:flex-row">
          <a className="...">Deploy now</a>
          <a className="...">Read our docs</a>
        </div>
      </main>
    </div>
  );
}

Renders: Home component with described UI elements.

ブラウザで http://localhost:3000 を開くと、次のものが表示されます:
- Next.js 公式ロゴ
- "Get started by editing src/app/page.tsx" の表示
- "Deploy now" と "Read our docs" の2つのリンク
- ダーク/ライトテーマ対応

public/
├── favicon.ico      # ブラウザタブアイコン
├── file.svg         # ファイルタイプアイコン
├── globe.svg        # 地球アイコン
├── next.svg         # Next.js ロゴ
├── vercel.svg       # Vercel ロゴ
└── window.svg       # ウィンドウアイコン

// コンポーネント内で public ディレクトリの画像を参照
<img src="/logo.png" alt="Logo" />
// または next/image コンポーネントを使用
import Image from 'next/image';
<Image src="/logo.png" alt="Logo" width={200} height={100} />

TypeScript compiled.

// ============================================
// next.config.ts — Next.js コンパイル時設定
// ============================================

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // 外部画像を指定ドメインから読み込めるように許可
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "fakestoreapi.com",
      },
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
    ],
  },

  // PPR (部分プリレンダリング) を有効化
  experimental: {
    ppr: true,
  },
};

export default nextConfig;

Component renders its UI.

設定が有効になった後:
1. <Image> コンポーネントは fakestoreapi.com と images.unsplash.com から画像を読み込める
2. ページ上の Suspense 境界以降のコンテンツは PPR ストリーミングレンダリングを使用する
3. npm run dev を再実行すると設定が反映される

# プロジェクトディレクトリに移動
cd shophub

# 開発サーバーを起動
npm run dev

  ▲ Next.js 16.0.0
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 1.2s

# ============================================
# 開発サーバーを起動し、Turbopack の超高速 HMR を観察
# ============================================

npm run dev

# コンソール出力
> shophub@0.1.0 dev
> next dev

  ▲  ▲
  ▲  Next.js 16.2
  ▲  - Local: http://localhost:3000
  ▲  - Turbopack: ✓ loaded in 742ms

✔ Compiled /src/app/page.tsx in 142ms (modules: 523)

✔ Updated /src/app/page.tsx in 4ms    ← 4ミリ秒！ほぼ瞬時に更新

  ▲ Next.js 16.2
  - Local: http://localhost:3000
  - Turbopack: ✓ loaded in 742ms

✔ Compiled /src/app/page.tsx in 142ms (modules: 523)
✔ Updated /src/app/page.tsx in 4ms    ← 4ミリ秒！ほぼ瞬時に更新

# 本番バージョンをビルド
npm run build

✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (5/5)
✓ Collecting build traces
✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    5.1 kB          89 kB
├ ○ /_not-found                          152 B          84.1 kB
└ λ /api/hello                           0 B            84.1 kB
+ First Load JS shared by all            84.1 kB
  ├ chunks/main-app                      ...
  └ chunks/webpack                       ...

○  (Static)  静的生成 (SSG)
λ  (Dynamic) 動的レンダリング (SSR)

(上記の出力を参照)

# ============================================
# 本番ビルド出力の解釈
# ============================================

# 2つのページが作成されたと仮定:
# app/about/page.tsx と app/dashboard/page.tsx
# そのうち dashboard は cookies() 動的関数を使用

npm run build

# 出力のシンボルの意味:
○  /              # 静的ページ (動的関数なし)
○  /about         # 静的ページ
λ  /dashboard     # 動的ページ (動的 API を使用)
○  /_not-found    # 404 ページ

Route (app)                              Size     First Load JS
┌ ○ /                                    5.1 kB          89 kB
├ ○ /about                               3.2 kB          87 kB
├ λ /dashboard                           6.8 kB          92 kB
└ ○ /_not-found                          152 B          84.1 kB

Route (app)                              Size     First Load JS
┌ ○ /                                    5.1 kB          89 kB
├ ○ /about                               3.2 kB          87 kB
├ λ /dashboard                           6.8 kB          92 kB
└ ○ /_not-found                          152 B          84.1 kB

○  (Static)  静的生成 (SSG)
λ  (Dynamic) 動的レンダリング (SSR)

# デプロイ後に本番サーバーを起動
npm run build
npm start

{
  "name": "shophub",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^16.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/node": "^22.0.0",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "typescript": "^5.7.0",
    "tailwindcss": "^4.0.0",
    "eslint": "^9.0.0",
    "@eslint/eslintrc": "^3.0.0"
  }
}

JSON structure with scripts (dev, build, start, lint, type-check, format, preview) and their corresponding CLI commands.

// ============================================
// package.json によく使うカスタムスクリプトを追加
// ============================================

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "type-check": "tsc --noEmit",
    "format": "prettier --write .",
    "preview": "npm run build && npm start"
  }
}

npm run type-check   → TypeScript 型チェックを実行 (ファイル出力なし)
npm run format       → 全コードを Prettier でフォーマット
npm run preview      → ビルド後、本番サーバーを起動 (1コマンドで完了)

# ============================================
# 総合例: 完全な Next.js 16 プロジェクトをゼロから構築
# TaskFlow — プロジェクトコラボレーション管理プラットフォーム
# ============================================

# 1. プロジェクトを作成
npx create-next-app@latest taskflow ^
  --typescript ^
  --eslint ^
  --tailwind ^
  --src-dir ^
  --app ^
  --import-alias "@/*"

# 2. プロジェクトディレクトリに移動
cd taskflow

# 3. ディレクトリ構造を表示
tree . /F | findstr /r "^.*src" > nul && dir /s /b src

# 4. 開発サーバーを起動
npm run dev

# 5. 別のターミナルで、推奨 VS Code 設定を追加
mkdir .vscode

// .vscode/settings.json — プロジェクトレベル設定
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

// src/app/page.tsx — ホームページを TaskFlow ウェルカムページに変更
import Link from "next/link";

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="container mx-auto px-4 py-16 text-center">
        <h1 className="text-5xl font-bold text-gray-900 mb-4">
          TaskFlow
        </h1>
        <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
          A collaborative project management platform built with Next.js 16.
          Plan, track, and deliver projects together.
        </p>
        <div className="flex gap-4 justify-center">
          <Link
            href="/login"
            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            Get Started
          </Link>
          <Link
            href="/about"
            className="px-6 py-3 border border-gray-300 rounded-lg hover:bg-gray-50"
          >
            Learn More
          </Link>
        </div>
        <div className="mt-16 grid grid-cols-3 gap-8 max-w-3xl mx-auto">
          <div className="p-6 bg-white rounded-xl shadow-sm">
            <h3 className="font-bold text-lg">Plan</h3>
            <p className="text-gray-500 mt-2">Create projects and assign tasks</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow-sm">
            <h3 className="font-bold text-lg">Track</h3>
            <p className="text-gray-500 mt-2">Monitor progress in real-time</p>
          </div>
          <div className="p-6 bg-white rounded-xl shadow-sm">
            <h3 className="font-bold text-lg">Deliver</h3>
            <p className="text-gray-500 mt-2">Ship projects on schedule</p>
          </div>
        </div>
      </div>
    </div>
  );
}

ブラウザで http://localhost:3000 に表示:

[TaskFlow タイトル]
A collaborative project management platform built with Next.js 16.
Plan, track, and deliver projects together.

[Get Started] [Learn More]

┌──────┐  ┌──────┐  ┌──────┐
│ Plan │  │ Track│  │Deliver│
└──────┘  └──────┘  └──────┘