← กลับไปหน้าบทเรียนบทที่ 02
2. Setup โปรเจกต์ Next.js + TypeScript + Tailwind
คำสั่งเริ่มต้น
bash
npx create-next-app@latest my-project --typescript --tailwind --app
cd my-projectpackage.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 ยิ่งทีมใหญ่ ยิ่งจำเป็น
📥 ดาวน์โหลดฉบับเต็ม
