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

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

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

3.0.2 package.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 ยิ่งทีมใหญ่ ยิ่งจำเป็น