React/Nextの覚書 | ワクガンス

環境構築：Windows環境のXAMPP | 2025年4月

この手順では、Windows環境でReactベースのNext.js開発環境を構築します。
node.js はすでにインストール済みとし、パッケージ管理は npm ではなく yarn を使用します。
目標は、yarn dev コマンドで開発サーバーが立ち上がる状態を作ることです。

なお、ここでは「XAMPP環境」としていますが、Next.jsはフロントエンド側のフレームワークなので、XAMPP（Apache＋PHP）は直接は関係ありません。XAMPPはバックエンドがPHPの場合に利用します。

1. プロジェクトを作成するディレクトリに移動
2. プロジェクトディレクトリを作成および移動

   mkdir next_demo2 && cd next_demo2

3. next.jsをインストール

   yarn create next-app .

   セットアップ中にいくつか質問されますが、基本は Enter連打で問題ありません。
   ※「Installing devDependencies:」で止まったように見える場合は、
   Ctrl + C を押して一度処理を中断します。
4. けて、依存パッケージのインストールを実行します

   yarn install

5. 開発サーバーを起動します。

   yarn dev

   ※次回からはプロジェクトディレクトリに移動したあと上記コマンドを実行するだけです。
6. ブラウザで以下のURLにアクセスし、Next.jsの初期画面が表示されれば成功です

   http://localhost:3000

上手く行ったときのディレクトリの構成

C:\Users\user\git\next_demo2
├── .gitignore
├── .next
│   ├── app-build-manifest.json
│   ├── build-manifest.json
│   ├── cache
│   ├── fallback-build-manifest.json
│   ├── package.json
│   ├── server
│   ├── static
│   └── types
├── README.md
├── app
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── next-env.d.ts
├── next.config.ts
├── node_modules
│   ├── .bin
│   ├── .yarn-integrity
│   ├── @alloc
│   ├── @img
│   ├── @next
│   ├── @swc
│   ├── @tailwindcss
│   ├── @types
│   ├── busboy
│   ├── caniuse-lite
│   ├── client-only
│   ├── color
│   ├── color-convert
│   ├── color-name
│   ├── color-string
│   ├── csstype
│   ├── detect-libc
│   ├── enhanced-resolve
│   ├── graceful-fs
│   ├── is-arrayish
│   ├── jiti
│   ├── lightningcss
│   ├── lightningcss-win32-x64-msvc
│   ├── nanoid
│   ├── next
│   ├── picocolors
│   ├── postcss
│   ├── react
│   ├── react-dom
│   ├── scheduler
│   ├── semver
│   ├── sharp
│   ├── simple-swizzle
│   ├── source-map-js
│   ├── streamsearch
│   ├── styled-jsx
│   ├── tailwindcss
│   ├── tapable
│   ├── tslib
│   ├── typescript
│   └── undici-types
├── package.json
├── postcss.config.mjs
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── tsconfig.json
└── yarn.lock
	

2025-4-7

xxx

2025-4-7