React และ Next.js — เว็บแอปพลิเคชันประสิทธิภาพสูง

ทำไมโปรเจกต์ของเราจึงเลือก Next.js

Next.js 15 กับ App Router ให้โมเดลไฮบริดที่เป็นเอกลักษณ์ หน้าแบบสแตติก (SSG) ส่งจาก CDN หน้าแบบไดนามิกทำงานเป็น Server Components ที่ไม่ส่ง JavaScript ที่ไม่จำเป็นไปยังเบราว์เซอร์ และหน้าแบบเรียลไทม์ใช้ Client Components ที่แยกขอบเขตไว้ การปรับแต่งประสิทธิภาพจึงอยู่ในสถาปัตยกรรมตั้งแต่วันแรก

รูปภาพถูกปรับให้เหมาะสมอัตโนมัติผ่านคอมโพเนนต์ `<Image>` (WebP/AVIF, srcSet ที่ปรับตามหน้าจอ, lazy-loading) ฟอนต์ถูกฝังใน critical CSS ด้วย `next/font` และสคริปต์ของบุคคลที่สามโหลดตามกลยุทธ์ลำดับความสำคัญ การปรับแต่งเหล่านี้ทำงานร่วมกันเพื่อลดขนาดทรัพยากรที่เบราว์เซอร์ต้องโหลด

• Server Components สำหรับหน้าการตลาด — ไม่มี JS ฝั่งไคลเอนต์ และ HTML ถูกส่งจากเซิร์ฟเวอร์
• Streaming SSR พร้อม Suspense สำหรับแดชบอร์ดที่มีข้อมูลสด
• Incremental Static Regeneration (ISR) สำหรับเนื้อหากึ่งไดนามิก
• Route Groups และ Parallel Routes สำหรับเลย์เอาต์ซับซ้อนโดยไม่ต้องเรนเดอร์ซ้ำ

TypeScript แบบ strict — ไม่มีบั๊กเงียบ

ทุกโปรเจกต์ของเราใช้ TypeScript ด้วย `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` และ `noUncheckedIndexedAccess` การตั้งค่าเหล่านี้ดักบั๊กรันไทม์ทั้งกลุ่มตั้งแต่ตอนคอมไพล์ เช่น การเข้าถึงค่า undefined ไทป์ของการตอบกลับ API ที่ไม่สมบูรณ์ และการเปรียบเทียบที่ผิด โปรเจกต์ทั่วไปมี TypeScript error เป็น 0 ใน CI ก่อนรันเทสต์ใด ๆ

สำหรับการจัดการสเตตเราใช้ Zustand (เบา ไม่มี boilerplate) หรือ React Context สำหรับสเตตภายในเฉพาะที่ การดึงข้อมูลใช้ TanStack Query (แคชอัตโนมัติ, invalidation อัจฉริยะ, stale-while-revalidate) ฟอร์มใช้ React Hook Form ร่วมกับการตรวจสอบด้วยสคีมา Zod — ตรวจสอบได้ทั้งแบบซิงโครนัสและอะซิงโครนัสโดยไม่ต้องเขียนโค้ดซ้ำ

• ESLint พร้อมกฎเฉพาะสำหรับรูปแบบที่ห้ามใช้ (any, console.log, magic strings)
• Prettier พร้อมคอนฟิกเดียวกันทั้งทีม — ไม่มี PR ถูกปฏิเสธเพราะเรื่องฟอร์แมต
• Zod สำหรับตรวจสอบข้อมูลจาก API ภายนอกขณะรันไทม์
• Path aliases (`@/components/...`) — import สะอาด ไม่ต้องใช้ `../../..`

การทดสอบอัตโนมัติและ CI/CD

Unit test ด้วย Vitest (เร็ว เข้ากันได้กับ API ของ Jest), component test ด้วย React Testing Library, E2E ด้วย Playwright บน 3 เบราว์เซอร์ (Chromium, Firefox, WebKit) ไปป์ไลน์ GitHub Actions รันทุกเทสต์ในทุก PR และบล็อกการ merge หากมีเทสต์ใดล้มเหลว ครอบคลุมโค้ดอย่างน้อย 80% ในส่วนตรรกะทางธุรกิจ

• Lighthouse CI — คะแนนต่ำกว่า 90 จะบล็อกการดีพลอยขึ้น staging
• ตัววิเคราะห์ bundle อัตโนมัติ — แจ้งเตือนหาก bundle โตกว่า main เกิน 5%
• Storybook สำหรับคอมโพเนนต์ UI — เอกสารภาพที่ใช้งานได้จริง