Module 1: Advanced Routing Patterns & Architecture
- Project Structure for Scale: การจัดโครงสร้างโปรเจกต์ขนาดใหญ่ (Feature-based vs Type-based)
- Parallel Routes (@folder): การแสดงผลหลาย Page ในหน้าจอเดียว (เช่น Dashboard ที่มีหลาย Panel โหลดแยกกัน)
- Intercepting Routes ((..)): การทำ Modal/Dialog ที่มี URL เป็นของตัวเอง
(เช่น กดรูปภาพแล้วเด้งเป็น Modal แต่พอกด Refresh กลายเป็นหน้าเต็ม)
- Route Groups & Multiple Layouts: การจัดการ Layout ที่ซับซ้อนสำหรับ User Role ที่ต่างกัน (Admin vs User)
- Middleware Mastery: การเขียน Middleware ดักจับ Request, Rewrite URL และจัดการ Headers ขั้นสูง
Module 2: Advanced Data Mutation & Server Actions
- Server Actions Deep Dive: การใช้งาน bind เพื่อส่ง Argument และการ Secure Server Actions
- Form Handling with useActionState: (New React Hook) การจัดการ Form State และ Validation Errors
จาก Server แบบมืออาชีพ
- Zod Integration: การทำ Schema Validation ทั้งฝั่ง Client และ Server ให้ตรงกัน
- Optimistic UI (useOptimistic): เทคนิคทำให้หน้าเว็บตอบสนองทันทีโดยไม่ต้องรอ Server
(เช่น กด Like แล้วขึ้นทันที ถ้า Error ค่อยเด้งกลับ)
Module 3: Authentication & Authorization (Auth.js v5)
- Setup Auth.js (NextAuth v5): การติดตั้งและ Config แบบล่าสุด
- Credentials & OAuth Provider: การทำ Login ด้วย Email/Password และ Google/GitHub
- Database Adapter: การเชื่อมต่อ Auth.js เข้ากับ Database (Prisma/Drizzle) เพื่อเก็บ User Session
- Session Management: การเข้าถึง Session ทั้งฝั่ง Client (useSession) และ Server (auth())
- Role-Based Access Control (RBAC): การป้องกัน Route และ Component ให้เข้าได้เฉพาะ Admin หรือ User ที่มีสิทธิ์
Module 4: Advanced UI Patterns with Shadcn/UI
- Server-Side Data Table: สร้างตารางข้อมูล (Data Table) ที่รองรับ Pagination, Sorting, Filtering
ที่ประมวลผลผ่าน URL Search Params (ไม่ใช่ Client state)
- Reusable Components: การสร้าง Custom Component ขั้นสูงจาก Shadcn Primitives
- Dark Mode & Theming Deep Dive: การจัดการ Theme ขั้นสูง
- Toaster & Error Handling: การแสดงผลแจ้งเตือนจาก Server Actions ผ่าน Toast
Module 5: State Management & URL State
- Why not just useState?: ปัญหาของ Client State และทำไมต้องใช้ URL State
- URL as State Source of Truth: การใช้ Library nuqs (Next.js URL Query States) เพื่อจัดการ Filter/Search ใน URL
- Server State vs Client State: เส้นแบ่งที่ชัดเจนว่าข้อมูลไหนควรอยู่บน Server ข้อมูลไหนควรอยู่บน Client
- Zustand (Optional): การใช้ Global State สำหรับข้อมูลที่ไม่เกี่ยวกับ Server
(เช่น Sidebar Open/Close, Complex UI Config)
Module 6: Performance & Caching Strategy
- Next.js Caching System: เข้าใจ Request Memoization, Data Cache, Full Route Cache
- unstable_cache & Tag Revalidation: การคุม Cache ระดับฟังก์ชันและการสั่งเคลียร์ Cache เฉพาะจุด
- Partial Prerendering (PPR): (New in v16) การผสม Static Shell กับ Dynamic Content ให้โหลดเร็วที่สุด
- Image & Font Optimization: เทคนิคการลด LCP (Largest Contentful Paint)
Module 7: Testing & Monitoring (Quality Assurance)
- Unit Testing: การเขียน Test Server Actions และ Utility Functions ด้วย Vitest
- Integration Testing: การเทส Component
- E2E Testing: การใช้ Playwright จำลองการกดใช้งานเว็บจริง
- Error Tracking: การติดตั้ง Sentry เพื่อดักจับ Error บน Production (Concept)
Module 8: Deployment & DevOps
- Environment Variables: การจัดการ .env สำหรับ Dev/Staging/Production
- Build Optimization: การวิเคราะห์ Bundle Size
- Dockerizing Next.js: การเขียน Dockerfile แบบ Multi-stage build สำหรับ Next.js (Standalone output)
- CI/CD Pipeline (GitHub Actions): เบื้องต้นการทำ Automation Build & Deploy