環境構築 & バックエンド疎通確認 手順まとめ
目的
- Next.js + TypeScript + React のフロントエンド環境を構築する
- Laravel（Docker）で構築したバックエンド API と疎通確認を行う
- 開発体験を優先し、フロントエンドは Docker 化しない
全体構成
N46-Remake/
├ frontend/ ← Next.js（今回構築）
└ backend/ ← Laravel（Docker）
- フロントエンド：localhost:3000
- バックエンド API：localhost:8000/api
1. Next.js プロジェクトの作成
cd N46-Remake
npx create-next-app frontend --typescript
質問への回答（今回の選択）
| 質問 |
回答 |
| TypeScript |
Yes |
| ESLint |
Yes |
| Tailwind CSS |
任意 |
| App Router |
Yes |
| src ディレクトリ |
Yes |
| import alias |
@/* |
| React Compiler |
No |
2. 開発サーバー起動
cd frontend
npm run dev