Checklist สำหรับรีวิว

นี่คือ checklist ที่ควรไล่ดู — ด้วยตา ในทุก diff ไม่ว่าจะเป็นของคุณหรือของ AI — หลังจากเครื่องมือใน Verification Tools รันแล้วผ่านสะอาด มันตั้งใจให้อยู่ในกระดาษหน้าเดียวที่ print ได้: checklist ที่ไม่มีใครเปิดดูจริงระหว่างรีวิวไม่มีค่าอะไรเลย ทุกบรรทัดลิงก์ไปบทที่อธิบายว่า ทำไม เพื่อให้หน้านี้ยังคงเป็นแค่ list ไม่ใช่การรื้อฟื้นทั้งคอร์สอีกรอบ กลุ่มต่างๆ เรียงตามลำดับเดียวกับ วิธีอ่านโค้ด Next.js ที่คุณไม่ได้เขียนเอง บวกกลุ่มปิดท้ายเรื่อง performance

flowchart LR
  B["Boundaries"] --> H["Mostly human review<br/>(1 real build-time check: router.push in a Server Component)"]
  A["Auth"] --> H
  E["Errors and redirects"] --> H
  D["Data and caching"] --> P["Partial tool coverage<br/>(tsc catches revalidateTag; next build catches cacheComponents conflicts)"]
  C["Config and env"] --> P
  F["Performance"] --> H

อะไรจับแต่ละกลุ่มได้จริง ถ้ามี

Boundaries

• 'use client' ทุกตัวอยู่ต่ำในต้นไม้เท่าที่จะทำได้ไหม แทนที่จะอยู่ใน layout หรือ page ที่ใช้ร่วมกัน? ดู Server and Client Components
• prop ทุกตัวที่ข้าม boundary Server → Client ยังเป็น plain data (หรือ Server Action จริงๆ) อยู่ไหม ไม่มี instance ของ class เปล่าๆ หรือ function reference ที่ไม่ได้ห่อ? ดู Server and Client Components
• ssr: false บน next/dynamic ถูกใช้เฉพาะข้างใน Client Component เท่านั้นไหม? ดู AI Bug Catalog entry 3
• useFormStatus รันใน component ที่ nest อยู่ ข้างใน <form> ไม่ใช่ component เดียวกับที่ render มันไหม? ดู Forms and Progressive Enhancement
• hook สำหรับ pending state ทุกตัวเป็น useActionState (จาก react) ไม่ใช่ useFormState (จาก react-dom) ที่ deprecate แล้วใช่ไหม? ดู AI Bug Catalog entry 5
• การเรียก useRouter/router.push ทุกครั้งอยู่ข้างใน Client Component ไม่ใช่ Server Component ใช่ไหม? ดู Server and Client Components
• data fetch นี้รันครั้งเดียวใน Server Component แทน useEffect ฝั่ง client ได้ไหม? ดู Fetching in Server Components

Data flow และ caching model

• การตั้งค่า cacheComponents ใน next.config.ts ตรงกับสมมติฐานของทุก route ไหม — export ของ Route Segment Config หรือ 'use cache' ไม่ใช่ผสมกัน? ดู Route Segment Config and Runtimes
• การเรียก fetch ทุกครั้งระบุ cache intent ชัดเจนไหม แทนที่จะสมมติพฤติกรรม cached-by-default ของ Next.js 14? ดู The Four Caching Layers
• การเรียก revalidateTag ทุกครั้งส่ง profile ของ cacheLife เป็น argument ที่สองไหม? ดู Revalidation and Cache Invalidation
• การอ่าน cookies()/headers() อยู่ข้างใน <Suspense> boundary ไหม แทนที่จะอยู่บนสุดของหน้าที่ตั้งใจให้เป็น static? ดู Static and Dynamic Rendering
• การเข้าถึง params/searchParams ทุกครั้ง await แล้ว และ type เป็น Promise ไม่ใช่ object หลวมๆ ใช่ไหม? ดู AI Bug Catalog entry 12
• generateStaticParams ป้องกันการ return array ว่างภายใต้ Cache Components ไหม? ดู AI Bug Catalog entry 13
• export const runtime = 'edge' ทุกตัวถูกลบไปแล้ว หรือเป็นข้อยกเว้นที่จงใจและมีเหตุผลรองรับไหม? ดู Route Segment Config and Runtimes
• มี getServerSideProps/getStaticProps ตกค้างจาก Pages Router อยู่ข้างใน app/ หรือเปล่า? ดู What is Next.js and the App Router

Auth ในทุก action และ route handler

• Server Action ทุกตัวเรียกการเช็ค session จริงก่อนแตะข้อมูลไหม ไม่ขึ้นกับว่า UI ไหน render ปุ่มที่เรียกมัน? ดู Server Actions คืออะไร
• mutation ทุกตัวกรองด้วย ID ของ user ที่ยืนยันตัวตนแล้วเอง ไม่ใช่แค่ยืนยันว่า มีใครสักคน login อยู่ใช่ไหม? ดู Security and Patterns
• Route Handler ทุกตัวใช้การเช็ค session แบบเดียวกับที่ Server Action ที่เทียบเท่าจะใช้ไหม? ดู Authentication Patterns

Error และ redirect

• try/catch ทุกอันที่อาจมี redirect()/notFound() อยู่ข้างใน อยู่นอกมันหรือเรียก unstable_rethrow ก่อนไหม? ดู Mutations and Revalidation
• error.tsx เป็น Client Component ที่เรียก reset() และวางอยู่ที่ segment ซึ่ง parent ของมันควรดักจับ error ใช่ไหม? ดู Pages, Layouts, and Nested Routing
• global-error.tsx ถ้ามี render <html>/<body> ของตัวเองไหม? ดู Pages, Layouts, and Nested Routing

Config และ environment

• middleware.ts ถูกเปลี่ยนชื่อเป็น proxy.ts แล้วหรือยัง (และ export ของมันเปลี่ยนเป็น proxy)? ดู Middleware and the Request Lifecycle
• ตัวแปร NEXT_PUBLIC_ ทุกตัวถูกอ่านแบบ static literal process.env.NEXT_PUBLIC_X ไหม ไม่ผ่าน computed key หรือ parameter ของ helper function เลย? ดู AI Bug Catalog entry 19
• มีตัวแปรที่ขึ้นต้น NEXT_PUBLIC_ ตัวไหนเก็บสิ่งที่ควรเป็น secret อยู่จริงไหม? ดู AI Bug Catalog entry 20
• metadataBase ถูกตั้งไว้ครั้งเดียวใน root layout ไหม? ดู Metadata and SEO

Performance

• next/image ทุกตัวที่ใช้ fill หรือ layout แบบ responsive ประกาศ sizes ไหม? ดู Images and Fonts
• <a> ทุกตัวที่ชี้ไปยัง route ภายในเป็น <Link> จริงๆ ไหม? ดู Linking and Navigation
• มี await ตัวไหนอยู่เหนือ <Suspense> boundary เดียวของหน้า จนบล็อก response ทั้งหมดไหม? ดู Streaming and Suspense
• มี Date.now()/Math.random() ตัวไหนรันข้างใน render ของ Client Component ไหม — ไม่ใช่ Server Component ที่มันไม่มีทาง mismatch เลย? ดู Static and Dynamic Rendering

▲ Checklist ช่วยให้ขอบเขตการค้นหาแคบลง ไม่ได้แทนที่การค้นหา

ทุกบรรทัดข้างบนตรงกับหนึ่งใน 25 pattern ใน AI Bug Catalog — สิบในนั้นไม่มีเครื่องมือไหนในคอร์สนี้จับได้อัตโนมัติเลย รัน list นี้กับทุก diff ไม่ว่า tsc กับ next build จะผ่านสะอาดแค่ไหนก็ตาม

ทำไม 'mutation ทุกตัวกรองด้วย ID ของ user ที่ยืนยันตัวตนแล้วเอง' ถึงอยู่ในกลุ่ม Auth แทนที่จะเป็น 'Data flow และ caching model'

ไม่ใช่ — มันควรอยู่ในกลุ่ม caching เพราะเป็นเรื่อง database query checklist จัดกลุ่มตามสิ่งที่พังจริง — mutation ที่ไม่กรองคือช่องโหว่ authorization ไม่ขึ้นกับ cache layer หรือรูปแบบ query ที่เกี่ยวข้อง การเช็ค auth ใน Next.js เป็นเรื่อง caching เสมอ สองกลุ่มนี้ไม่มีความต่างที่มีความหมาย

กลุ่มไหนใน checklist จับสิ่งนี้ได้ และจับได้อย่างไร

try {
  if (!post) notFound()
  return post
} catch (err) {
  console.error(err)
  return null
}

Performance — เป็นเรื่อง lookup ที่ช้า Error และ redirect — 'try/catch ทุกอันที่อาจมี redirect()/notFound() อยู่นอกมันหรือเรียก unstable_rethrow ก่อนไหม?' Boundaries — เป็นปัญหาเรื่องตำแหน่ง 'use client' ไม่มีกลุ่มไหนครอบคลุมเรื่องนี้

ทำไม checklist ถึงถามเจาะจงว่าการเข้าถึง params/searchParams 'type เป็น Promise' ไม่ใช่แค่ 'await แล้ว'

การ type ไม่สำคัญ — มีแค่ await ตอน runtime เท่านั้นที่สำคัญ prop type ที่หลวมและไม่ใช่ Promise ทำให้การขาด await compile ผ่านสะอาดแล้ว return undefined แบบเงียบๆ มีแค่ prop type ที่เป็น Promise เท่านั้นที่เปลี่ยนความผิดพลาดแบบเดียวกันให้เป็น compile error จริง params ไม่เคยเป็น Promise จริงๆ ใน Next.js 16 TypeScript แสดง Promise type สำหรับ page prop ไม่ได้

'metadataBase ถูกตั้งไว้ครั้งเดียวใน root layout ไหม' อยู่ในกลุ่มไหน

Performance Config และ environment Boundaries Auth

checklist บอกให้เช็คว่า 'มี Date.now()/Math.random() ตัวไหนรันข้างใน render ของ Client Component ไหม — ไม่ใช่ Server Component' ทำไมความต่างนี้ถึงสำคัญ

ไม่สำคัญ — ทั้งคู่ hydration-mismatch เหมือนกันเสมอ Server Component render แค่ครั้งเดียวบน server ไม่มีการรันซ้ำฝั่ง client ตอน hydration ที่จะขัดแย้งกับ HTML ที่ส่งไปแล้ว Math.random() ถูกห้ามใช้ทั้งหมดใน Next.js Server Component เรียก Math.random() ไม่ได้เลย

Submit

Mark as complete