Next.jsアプリの作り方

Next.jsアプリの作り方を説明します！

Next.jsプロジェクトの作成方法

1. 基本的な作成（推奨）

npx create-next-app@latest

このコマンドを実行すると、対話形式でいくつか質問されます：

✔ What is your project named? › my-app
✔ 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

2. プロジェクト名を指定して作成

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

3. すべてデフォルト設定で作成（最速）

npx create-next-app@latest my-next-app --use-npm --tailwind --app --no-turbopack

プロジェクト作成後の手順

1. プロジェクトディレクトリに移動

cd my-next-app

2. 開発サーバーを起動

npm run dev

ブラウザで http://localhost:3000 が自動的に開きます。

プロジェクト構造

my-next-app/
├── app/                  # App Router（推奨）
│   ├── page.js          # トップページ
│   ├── layout.js        # 共通レイアウト
│   └── globals.css      # グローバルCSS
├── public/              # 静的ファイル（画像など）
├── package.json
└── next.config.js       # Next.js設定ファイル

簡単なページの作り方

app/page.js を編集

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
      <p className="mt-4 text-xl">Start building your app</p>
    </main>
  );
}

保存すると、ブラウザが自動的にリロードされます（ホットリロード）。

Next.js vs Create React App