## 2. Setup โปรเจกต์ Next.js + TypeScript + Tailwind

### คำสั่งเริ่มต้น

```bash
npx create-next-app@latest my-project --typescript --tailwind --app
cd my-project
```

### package.json (ของจริง)

```json
{
  "dependencies": {
    "next": "16.2.6",
    "react": "19.2.6",
    "react-dom": "19.2.6",
    "@supabase/ssr": "^0.10.3",
    "@supabase/supabase-js": "^2.106.2",
    "@stripe/stripe-js": "^9.7.0",
    "stripe": "^22.2.0"
  },
  "devDependencies": {
    "@types/node": "25.9.1",
    "@types/react": "19.2.15",
    "@types/react-dom": "19.2.3",
    "autoprefixer": "10.5.0",
    "postcss": "8.5.15",
    "tailwindcss": "3.4.19",
    "typescript": "6.0.3"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "typecheck": "tsc --noEmit",
    "seo:audit": "node scripts/seo-route-audit.mjs"
  }
}
```

> 💡 **ข้อสังเกต:** ของจริงใช้ TypeScript 6.0.3 ที่เพิ่งออกใหม่ กับ Next.js 16 และ React 19 ซึ่งเป็นเวอร์ชันล่าสุด
>
> 🤔 **ทำไมต้องใช้ TypeScript?** — ป้องกัน bug ที่พบบ่อยใน JavaScript เช่น ใส่ string ในฟิลด์ที่ต้องเป็น number,
> ลืม return ค่า, หรือเรียก method ที่ไม่มีอยู่ TypeScript จับ error พวกนี้ตั้งแต่ตอนเขียนโค้ด
> ก่อน跑到 production ยิ่งทีมใหญ่ ยิ่งจำเป็น