App Router & Component Architecture (สัปดาห์ที่ 1–3)
การปรับ Mental Model จาก React แบบเดิมมาสู่ยุค React Server Components (RSC) และการออกแบบสถาปัตยกรรมของแอปพลิเคชัน Next.js ครับ
ยินดีครับ! การเริ่มต้นด้วย Level 1: App Router & Component Architecture (สัปดาห์ที่ 1–3) คือหัวใจที่สำคัญที่สุด เพราะเป็นการปรับ Mental Model จาก React แบบเดิมมาสู่ยุค React Server Components (RSC) ครับ
นี่คือโครงสร้างแผนการเรียนรู้และ Roadmap ของ Level 1 เพื่อให้คุณบริหารเวลา 30 นาทีต่อวัน ได้อย่างมีประสิทธิภาพสูงสุดครับ:
🗺️ Level 1 Roadmap Overview (Weeks 1–3)
สัปดาห์ที่ 1: RSC Mental Model & Layout System
มุ่งเน้นการเข้าใจขอบเขตระหว่าง Server และ Client รวมถึงระบบ Routing ใหม่
- Day 1: Server Components vs. Client Components Boundary (
'use client'directive และ serialization) - Day 2: Nested Layouts & Pages Architecture (การส่งผ่าน
childrenและการแชร์ State ใน Layout) - Day 3: Templates vs. Layouts (ความแตกต่างในการ Re-mount และการเก็บ State)
- Day 4: Special Files Hierarchy (
loading.tsx,error.tsx,not-found.tsx,global-error.tsx) - Day 5: Linking & Navigation Mechanics (
<Link>,useRouter, Prefetching, และ Soft Navigation) - Day 6–7: Review Quiz สัปดาห์ที่ 1 & ฝึกซ้อมย่อย
สัปดาห์ที่ 2: Advanced Routing Patterns
มุ่งเน้นการจัดการโครงสร้าง Route ที่ซับซ้อนในแอปพลิเคชันระดับองค์กร
- Day 8: Dynamic & Catch-All Routes (
[slug],[...slug],[[...slug]]และ TypeScript Params Typings) - Day 9: Parallel Routes & Slots (การใช้
@slotร่วมกับ Modal หรือ Multi-panel Dashboards) - Day 10: Intercepting Routes (การทำ Route Interception เช่น
(.)photoร่วมกับ Parallel Routes) - Day 11: Route Handlers (
app/api/route.ts) (การเขียน RESTful Endpoints,NextRequest&NextResponse) - Day 12: Route Segment Config & Middleware Intro (
dynamic,revalidate,runtimesettings) - Day 13–14: Review Quiz สัปดาห์ที่ 2 & ฝึกซ้อมย่อย
สัปดาห์ที่ 3: Rendering Strategies & Hydration Mastery
มุ่งเน้นประสิทธิภาพการโหลด หน้าจอ และการแก้ปัญหา Hydration Mismatch
- Day 15: Static vs. Dynamic Rendering (พฤติกรรม Auto-bailout เมื่อเรียกใช้ Cookies/Headers)
- Day 16: Streaming with Suspense (การทำ Progressive Rendering สำหรับ UI ชิ้นที่โหลดช้า)
- Day 17: Partial Prerendering (PPR) (การรวม Static Shell เข้ากับ Dynamic Holes)
- Day 18: Hydration Errors Breakdown (สาเหตุ และวิธีการแก้ Hydration Mismatch)
- Day 19: Component Composition Architecture (การแทรก Client Component ลงใน Server Component อย่างถูกวิธี)
- Day 20–21: Review Quiz สัปดาห์ที่ 3 & Level 1 Graduation Project
🎯 แนวทางการฝึกประจำวัน (30 นาที/วัน)
- 5–10 นาทีแรก: อ่าน/สรุป Micro-Concept และสถาปัตยกรรมย่อยประจำวัน
- 20 นาทีหลัง: ลุย Daily Drill / Code Exercise 1–2 ข้อที่เน้นการเขียน TypeScript สดๆ และแก้โจทย์จริง
คุณพร้อมที่จะเริ่ม Day 1: Server Components vs. Client Components Boundary เลยไหมครับ? ผมสามารถดึงโจทย์ Drill ข้อแรกมาลุยกันได้ทันที!