Next.js Routing Deep Dive: สถาปัตยกรรมชั้นสูงของ App Router

🛑 1. The Problem First: "แอปพลิเคชันที่ขาดระเบียบและจัดการยาก"

ลองนึกถึงเว็บขนาดใหญ่ที่มีหน้าเว็บ 100 หน้า แต่ละหน้ามี Sidebar และ Navbar ตัวเดียวกัน:

// ❌ Naive Approach (แบบเก่า): ก๊อปปี้ Sidebar ไปใส่ในทุุกหน้า
function UserPage() {
    return (
        <div>
           <Navbar />
           <Sidebar />
           <UserContent />
        </div>
    );
}
// 🌋 พัง! ทุุกครั้งที่คุณเปลี่ยนหน้า Browser จะต้องทำลาย (Unmount) และสร้าง
# Sidebar/Navbar ใหม่ทุุกครั้ง (Re-render) ทำให้ผู้ใช้รู้สึกกระตุก
# และคุณยังเสียค่าประมวลผลไปกับการวาดสิ่งที่ 'ควรจะอยู่เฉยๆ' ซ้ำไปมาครับ

ปัญหา: ยิ่งโปรเจกต์ซับซ้อน การจัดการสถานะที่ต้อง "คงอยู่" ข้ามหน้า (Persistent State) และการลดงานที่ซ้ำซ้อนคือหัวใจสำคัญ Next.js App Router จึงนำเสนอระบบไฟล์พิเศษเพื่อแก้ปัญหานี้โดยเฉพาะครับ

💡 2. Real-Life Analogy: ห้องนิทรรศการในพิพิธภัณฑ์

• Layout (layout.tsx): เหมือน "ห้องโถงหลักและผนังของอาคาร". ไม่ว่าคุณจะเดินไปที่รูปภาพไหน (Page) ผนังและเพดานยังอยู่ที่เดิม ไม่ขยับเขยื้อน ทำให้ทัวร์ชมงานเป็นไปอย่างลื่นไหล
• Page (page.tsx): เหมือน "รูปภาพที่ติดอยู่บนผนัง". แต่ละรูปมีเนื้อหาเฉพาะตัว เปลี่ยนไปตามที่คุณเดินผ่าน (Route)
• Loading (loading.tsx): เหมือน "ม่านที่คลุมรูปภาพไว้ก่อนจะเปิดนิทรรศการ". ทำให้ผู้ใช้รู้ว่าตรงนี้ "มีของ" แต่รอแป๊บนึงนะ เชฟกำลังปรุง (Streaming)
• Error (error.tsx): เหมือน "ป้ายเตือนซ่อมบำรุง". เมื่อรูปภาพเสียหาย (Crash) ป้ายนี้จะมาแทนที่แค่รูปนั้น โดยที่ผนังและเพดาน (Layout) ยังคงอยู่ปกติ ไม่ล่มทั้งตึก

🚀 3. Execution Journey: มหากาพย์การวางโครงสร้างแบบมือโปร

Senior จะใช้ประโยชน์จากไฟล์พิเศษเหล่านี้เพื่อคุม UX ให้ลื่นปรื๊ด

🛠 Step-by-step:

1. The Shared Shell: ใช้ layout.tsx เก็บส่วนที่ Context ห้ามหาย (เช่น สถานะการ Login หรือตะกร้าสินค้า)
2. The Smooth Stream: สร้าง loading.tsx เพื่อส่งโครงร่าง (Skeleton) ออกไปให้ User เห็นทันทีที่คลิก
3. The Logical Boundary: ใช้ group/ (folders) เพื่อจัดหมวดหมู่โค้ดโดยไม่กระทบต่อ URL จริงของเว็บ
4. The Safe Action: ใช้ Server Actions เพื่อสื่อสารกับหลังบ้านโดยตรงผ่าน HTML Form (ลดความซับซ้อนของ API)

// ✅ Best Practice: การจัดการ Error เฉพาะจุด ไม่ให้พังทั้งเว็บ
"use client"; // Error Boundary ต้องเป็น Client Component
export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div className="p-4 bg-red-50 text-red-500">
      <h2>เกิดข้อผิดพลาดเฉพาะส่วนนี้!</h2>
      <button onClick={() => reset()}>ลองใหม่อีกครั้ง</button>
    </div>
  );
}

🪤 4. The Junior Trap: โรค "Caching Aggression" (ทำไมแก้โค้ดแล้วไม่เปลี่ยน?)

จูเนียร์มักจะงงว่าทำไมข้อมูลที่ดึงมาจาก API ถึงไม่อัปเดตแม้จะ Refresh หน้าหลายรอบ:

// ❌ Junior Trap: ไม่ระบุประเภทการ Cache
const data = await fetch('https://api.example.com/data');
// 🌋 พัง! Next.js จะถือว่านี่คือ 'Static Fetch' และจะ Cache ข้อมูลนี้ไว้อย่างถาวร
# จนกว่าคุณจะสั่ง Build ใหม่ หรือระบุเวลาหมดอายุ (Revalidate)

ระวัง: Caching คือดาบสองคม มันทำให้เว็บเร็วแต่ดุเสมือนว่ามันพัง ✅ การแก้ไข: จงระบุ { cache: 'no-store' } ถ้าต้องการข้อมูลที่สดใหม่เสมอ หรือใช้ { next: { revalidate: 60 } } เพื่อหาความสมดุลครับ

⚖️ 5. The Why Matrix: Layout vs Template

🎓 6. Senior Mindset Summary

การเป็น Senior คือการมองว่า "Routing ไม่ใช่แค่การประกาศ URL แต่มันคือการออกแบบ Life-cycle ของข้อมูลและ UI ที่จะส่งถึงมือผู้ใช้". โครงสร้างไฟล์ที่ถูกต้องคือรากฐานที่ทำให้ทีมของคุณสามารถขยายโปรเจกต์ (Scaling) ได้โดยไม่เกิดความสับสนในภายหลังครับ!