Tech Stack สำหรับการพัฒนาเว็บแบบ AI-Native
AI agent อย่าง Claude Code กำลังเปลี่ยนวิธีการสร้างซอฟต์แวร์ของคุณ คุณสามารถทำงานได้รวดเร็วกว่าที่เคย แต่ความเร็วอาจนำไปสู่โค้ดที่ยุ่งเหยิง คุณต้องรักษาโปรเจกต์ให้เรียบง่ายและดูแลรักษาได้ง่ายเพื่อการเติบโต
นี่คือ stack ที่เราใช้เพื่อสร้างงานอย่างรวดเร็วและขยายระบบ (scale) ได้อย่างง่ายดาย
กลยุทธ์สำหรับ AI Agent อย่าทำอะไรให้ซับซ้อนเกินความจำเป็น (overengineer) AI ทำให้การเพิ่มโค้ดที่ไม่มีประโยชน์นับพันบรรทัดเป็นเรื่องง่าย
- รักษาไฟล์ AGENTS.md หรือ CLAUDE.md ให้มีขนาดเล็ก
- ใส่เฉพาะกฎของโปรเจกต์ที่ agent มักจะทำผิดพลาดบ่อยๆ เท่านั้น
- ติดตั้งทักษะเฉพาะทาง (specific skills) เฉพาะเมื่อจำเป็นต้องใช้เท่านั้น
- ลบทักษะออกเมื่อการสนทนาสิ้นสุดลง เพื่อรักษา context ให้สะอาด
Frontend และ UI
- Next.js: ใช้ App Router ซึ่งช่วยจัดการการทำ server-side rendering เพื่อ SEO และความเร็วที่ดีขึ้น
- React: Ecosystem ที่ดีที่สุดสำหรับการเพิ่มฟีเจอร์ต่างๆ อย่างรวดเร็ว
- MUI (Material UI): เราใช้สิ่งนี้เพื่อหลีกเลี่ยงการออกแบบทุกอย่างใหม่ตั้งแต่ต้นใน Figma ซึ่งช่วยประหยัดเวลาทำงานไปได้หลายเดือน
- Zod และ React Hook Form: คู่หูที่ดีที่สุดสำหรับการจัดการฟอร์มที่ซับซ้อนและการทำ validation
Backend และ Data
- Firebase: เราใช้สำหรับ authentication, storage และฐานข้อมูล (Firestore)
- Firestore Rules: จัดการสิทธิ์การเข้าถึง (permissions) ทั้งหมดในไฟล์เดียว ช่วยลดความจำเป็นในการเขียนโค้ดด้านความปลอดภัยซ้ำซ้อน
- Firebase Functions: ใช้สำหรับตรรกะ (logic) ที่ซับซ้อน โดยให้ frontend ทำหน้าที่เพียงแสดงผล (dumb) และให้ backend เป็นส่วนที่จัดการความฉลาด (smart)
- Vercel AI SDK: วิธีที่ง่ายที่สุดในการรวม AI model ต่างๆ เข้ากับแอปของคุณ
การทดสอบและการ Deploy
- Integration Tests: เราใช้ Jest ในการทดสอบ backend service layer โดยเราจะเน้นไปที่การทำงานร่วมกันของส่วนประกอบต่างๆ มากกว่าการทำ unit tests เล็กๆ
- TypeScript: สิ่งนี้จำเป็นอย่างยิ่งสำหรับการทำ refactoring อย่างปลอดภัย
- Vercel: เชื่อมต่อกับ GitHub เพื่อให้สามารถ deploy ทั้งบน production และ preview ได้ทันที
- PostHog: ใช้สำหรับ analytics, session replays และ error logs
- Resend และ react-email: ช่วยให้คุณเขียนอีเมลในรูปแบบของ React components ได้
มีโปรเจกต์เทมเพลตที่มีโครงสร้างแบบนี้อยู่บน GitHub
Source: https://dev.to/martinxpn/the-teach-stack-for-building-web-platforms-in-the-ai-native-era-45ka
Optional learning community: https://github.com/MartinXPN/nextjs-firebase-mui-starter