Full-Stack Web Application with Next.js 16 and Prisma

Section 1: ทำความรู้จัก Next.js และภาพรวมเวอร์ชัน 16

• Next.js คืออะไร แก้ปัญหาอะไรให้นักพัฒนา React และความแตกต่างระหว่าง CSR, SSR, SSG, ISR และ Streaming SSR
• พัฒนาการจาก Pages Router สู่ App Router และสิ่งใหม่สำคัญใน v16: Turbopack เป็นค่ามาตรฐาน, Cache Components, proxy.ts, Async Request APIs
• ข้อกำหนดของระบบ และสิ่งที่ถูกถอดออกใน Next.js 16 (AMP, next lint, serverRuntimeConfig, Sync Params) พร้อมผลกระทบต่อโปรเจกต์เดิม

Section 2: สร้างโปรเจกต์และทำความเข้าใจโครงสร้าง

• สร้างโปรเจกต์ด้วย create-next-app โครงสร้างไดเรกทอรีมาตรฐาน และการตั้งค่า TypeScript, Path Alias และ ESLint Flat Config
• Turbopack ความเร็วที่เปลี่ยนไป และการใช้งาน Next.js DevTools
• Workshop: สร้างโปรเจกต์ nextjs-training ที่จะใช้พัฒนาต่อเนื่องตลอดหลักสูตร

Section 3: ระบบ Routing ของ App Router

• File-system Routing และไฟล์พิเศษ page.tsx, layout.tsx, template.tsx พร้อม Nested Routes และ Dynamic Routes
• params และ searchParams เป็น Promise แล้วใน Next.js 16 (ต้อง await), Route Groups และ Private Folders
• Parallel Routes, Intercepting Routes และการนำทางด้วย Link, useRouter, redirect() และ notFound()

Section 4: React Server Components และ Client Components

• แนวคิด RSC และเหตุผลที่เปลี่ยนวิธีคิด Server Component เป็นค่ามาตรฐาน ประโยชน์ด้าน Bundle Size และความปลอดภัย
• เมื่อไรควรใช้ use client, ขอบเขต Component Boundary และรูปแบบส่ง Server Component เป็น children เข้า Client Component
• ข้อจำกัดที่ต้องรู้ และการใช้ server-only กับ client-only เพื่อป้องกันโค้ดหลุดผิดฝั่ง

Section 5: Loading, Error, Streaming และ Metadata

• loading.tsx, Suspense สำหรับ Streaming ระดับ Component และ error.tsx, global-error.tsx, not-found.tsx
• Static และ Dynamic Metadata API เพื่อ SEO พร้อมการจัดการ Font และรูปภาพด้วย next/font และ next/image
• Workshop: สร้างโครงสร้างหน้าเว็บพร้อม Layout, Loading, Error และ Metadata ครบทุกชั้น

Section 6: การดึงข้อมูล (Data Fetching) ใน App Router

• Fetch ข้อมูลใน Server Component ด้วย async/await และพฤติกรรมของ fetch ใน v16 กับการเปลี่ยนค่ามาตรฐานเรื่องแคช
• Request Memoization ด้วย React.cache() และรูปแบบ Sequential vs Parallel Data Fetching
• การดึงข้อมูลฝั่ง Client เมื่อจำเป็น และการเลือกใช้ SWR หรือ TanStack Query

Section 7: Route Handlers - สร้าง REST API ใน Next.js

• ไฟล์ route.ts และการ Export ตาม HTTP Method พร้อม NextRequest และ NextResponse
• การอ่าน Query String, Path Params (เป็น Promise แล้ว), Request Body, Header, Cookie และ Route Segment Config
• Runtime Node.js กับ Edge, การทำ Streaming Response และแนวปฏิบัติที่ถูกต้อง

Section 8: Server Actions และการเขียนข้อมูล

• แนวคิด Server Actions และ use server การใช้กับ form แบบ Progressive Enhancement พร้อม useActionState, useFormStatus, useOptimistic
• การทำ Revalidation ด้วย revalidatePath และ revalidateTag
• ความปลอดภัย: Server Action เป็น Endpoint สาธารณะ ต้องตรวจสิทธิ์ภายในทุกครั้ง และเปรียบเทียบว่าเมื่อไรควรใช้ Server Action หรือ Route Handler

Section 9: รู้จัก Prisma ORM 7 และการเปลี่ยนแปลงครั้งใหญ่

• องค์ประกอบของ Prisma และสิ่งที่เปลี่ยนใน Prisma 7: ยกเลิก Rust Engine เปลี่ยนมาใช้ Query Compiler แบบ WebAssembly
• Generator ตัวใหม่ prisma-client และ Driver Adapter ที่เป็นข้อบังคับแล้ว (เรียก new PrismaClient() เปล่าไม่ได้อีก)
• ไฟล์ prisma.config.ts การย้าย url ออกจาก schema.prisma และข้อกำหนดใหม่ Node.js 20.19+, TypeScript 5.4+

Section 10: ติดตั้ง PostgreSQL และเชื่อมต่อ Prisma ครั้งแรก

• เตรียม PostgreSQL 17 ด้วย Docker Compose ติดตั้ง Prisma และ @prisma/adapter-pg และตั้งค่า prisma.config.ts ให้ถูกต้อง
• รูปแบบ Singleton PrismaClient สำหรับ Next.js และการตั้งค่า postinstall: prisma generate
• Workshop: เชื่อมต่อโปรเจกต์เข้ากับ PostgreSQL สร้างตารางแรก และทำ CRUD API ครบชุดด้วย Route Handlers และ Server Actions

Section 11: ออกแบบ Schema ด้วย Prisma Schema Language

• โครงสร้าง schema.prisma แบบ Multi-file, Scalar Type และ Attribute ที่ใช้บ่อย (@id, @unique, @default, @@index)
• ฟังก์ชันค่าเริ่มต้น autoincrement(), uuid(7), cuid(2), ulid() พร้อมข้อควรรู้ว่า uuid()/cuid() ทำงานฝั่ง Client เท่านั้น
• Native Type ของ PostgreSQL (@db.Uuid, @db.JsonB, @db.Timestamptz) และการออกแบบ Index ให้เหมาะกับการ Query

Section 12: ความสัมพันธ์ระหว่างตาราง (Relations)

• One-to-One, One-to-Many, Many-to-Many (Implicit และ Explicit Join Table) และ Self-relation
• onDelete และ onUpdate (Cascade, Restrict, SetNull), Composite Key และ relationMode (foreignKeys กับ prisma)
• Workshop: ออกแบบ Schema ระบบงานตัวอย่าง (User, Role, Product, Category, Order, OrderItem, Payment) แบบครบวงจร

Section 13: Prisma Migrate ตลอดวงจรการพัฒนา

• ความแตกต่างระหว่าง migrate dev, migrate deploy, db push และ Shadow Database
• การจัดการ Drift (migrate status, resolve, diff), การทำ Baselining และ Seed Data ด้วย prisma db seed
• Error Code ที่พบบ่อย (P3005, P3006, P3009, P3014, P3018) และแนวทาง Migration บน Production อย่างปลอดภัย

Section 14: Prisma Client Query เชิงลึก

• CRUD ครบชุดและ Batch Operations, Filtering ขั้นสูง (AND, OR, NOT, in, contains, mode: insensitive)
• การโหลดข้อมูลสัมพันธ์ (include, select, Nested Write), Pagination (Offset กับ Cursor) และ Aggregation (count, groupBy, _sum)
• JSON Field, Full-Text Search, Raw Query ($queryRaw, $executeRaw) การป้องกัน SQL Injection และ TypedSQL (Preview)

Section 15: Transaction, Performance และ Connection Pool

• Sequential กับ Interactive Transaction, ตัวเลือก maxWait, timeout, Isolation Level และการจัดการ Write Conflict (P2034)
• ปัญหา N+1 บน Prisma และวิธีตรวจจับ, relationLoadStrategy (Preview) และการเปิด Query Logging ดู SQL จริง
• Connection Pool ใน Prisma 7 (ตั้งที่ Driver Adapter), PgBouncer/Supavisor และ Prisma Client Extensions แทน $use

Section 16: MariaDB กับ Prisma - การใช้งานจริงและข้อควรระวัง

• MariaDB ใช้ Provider mysql เดียวกับ MySQL การติดตั้ง @prisma/adapter-mariadb และตารางเปรียบเทียบ Type Mapping กับ PostgreSQL
• ฟีเจอร์ที่ใช้ไม่ได้บน MariaDB (Scalar List, multiSchema, mode: insensitive, createManyAndReturn) และที่ได้เปรียบ (Full-Text Index)
• ข้อควรระวังสำคัญ: ปัญหาเปิดค้างของ Prisma 7 กับ MariaDB เรื่อง JSON, Migration Drift, Timezone และ Collation พร้อม Workshop ย้าย Schema มารันบน MariaDB

Section 17: Validation และ Error Handling อย่างเป็นระบบ

• ใช้ Zod ตรวจสอบข้อมูลขาเข้าทั้ง Route Handler และ Server Action พร้อม Schema ที่ใช้ร่วมกันได้ระหว่าง Client Form และ Server
• การออกแบบรูปแบบ Response ของ API ให้เป็นมาตรฐาน และการจัดการ Error ของ Prisma (P2002, P2003, P2025)
• Centralized Error Handler, การเก็บ Log และ instrumentation.ts กับ onRequestError

Section 18: Data Access Layer และความปลอดภัยของข้อมูล

• แนวคิด Data Access Layer (DAL) การแยก Business Logic ออกจาก Route และรูปแบบ DTO ควบคุมข้อมูลที่ส่งออก
• การใช้ server-only ป้องกัน Secret รั่ว และการจัดการ Environment Variable อย่างปลอดภัย
• ช่องโหว่ที่พบบ่อยและวิธีป้องกัน: Mass Assignment, IDOR และการเปิดเผยข้อมูลเกินจำเป็น

Section 19: Authentication ด้วย Better Auth

• ภาพรวม Authentication แบบ Session และ Token การติดตั้งและตั้งค่า Better Auth พร้อมเชื่อม Prisma Adapter
• Email & Password, Social Provider (Google, GitHub), Plugin nextCookies() และการอ่าน Session ด้วย auth.api.getSession()
• การตั้งค่า Cookie ให้ปลอดภัย, Rate Limiting และ Plugin ที่ใช้บ่อย (2FA, Passkey, Magic Link)

Section 20: Authorization และ Role-Based Access Control (RBAC)

• ออกแบบ Schema สำหรับ Role และ Permission ด้วย Prisma และ Access Control API ของ Better Auth
• proxy.ts แทน middleware.ts ใน Next.js 16 และการทำ Route Protection (ทำงานบน Node.js Runtime เท่านั้น)
• Workshop: เพิ่มระบบ Login และ RBAC 3 ระดับ (Admin, Staff, Customer) เข้ากับระบบงานตัวอย่าง

Section 21: File Upload และงานเบื้องหลัง

• การรับไฟล์อัปโหลดผ่าน Server Action และ Route Handler การตรวจชนิด/ขนาดไฟล์ และเก็บ Metadata ลงฐานข้อมูล
• แนวทางเก็บไฟล์: Local Storage, S3-compatible Storage และ Presigned URL
• การใช้ after() ทำงานเบื้องหลังหลังส่ง Response และแนวทาง Background Job กับ Scheduled Task

Section 22: Testing - Vitest และ Playwright

• กลยุทธ์การทดสอบ (Testing Pyramid) การตั้งค่า Vitest กับ Next.js, Unit Test และ Component Test ด้วย Testing Library
• Integration Test สำหรับ API ที่ต่อฐานข้อมูลจริง การใช้ Test Database และการ Mock Prisma Client (และเมื่อไรที่ไม่ควร Mock)
• E2E Test ด้วย Playwright การจัดการ Authentication State และการรัน Test อัตโนมัติในกระบวนการ CI

Section 23: ระบบแคชของ Next.js 16 และ Cache Components

• ภาพรวมชั้นแคชและ Cache Components (cacheComponents: true) แนวคิด Dynamic by Default และคำสั่ง use cache
• use cache: private/remote, การกำหนดอายุด้วย cacheLife, Tag ด้วย cacheTag และการล้างแคช revalidateTag, updateTag, refresh
• ข้อจำกัดภายใน use cache และรูปแบบลดภาระฐานข้อมูลด้วยการแคชผลลัพธ์ Query ของ Prisma

Section 24: Partial Prerendering และ Performance Optimization

• แนวคิด Partial Prerendering (PPR), Partial Prefetching และ Instant Navigations ใน v16.3
• การวิเคราะห์ Bundle Size, Dynamic Import, Code Splitting, การปรับแต่งรูปภาพ และ React Compiler
• การวัดผลด้วย Core Web Vitals และ Lighthouse และการปรับจูนฝั่งฐานข้อมูลด้วย EXPLAIN และ Index

Section 25: Deployment แบบ Self-hosted ด้วย Docker

• output: standalone และ Dockerfile แบบ Multi-stage การจัดการ Environment Variable ให้ใช้ Image เดียวได้หลายสภาพแวดล้อม
• การรัน prisma migrate deploy อย่างปลอดภัย, Docker Compose ครบชุด (Next.js + PostgreSQL + Reverse Proxy) และ Nginx
• การ Deploy หลาย Instance, Custom Cache Handler ด้วย Redis และภาพรวม Adapter API กับ Vercel

Section 26: CI/CD และการดูแลระบบหลัง Deploy

• ออกแบบ Pipeline ด้วย GitHub Actions: Lint, Type Check, Test, Build, Deploy และการจัดการ Migration ใน Pipeline
• การจัดการ Secret, Health Check, Graceful Shutdown และแนวทาง Monitoring กับการเก็บ Log ระดับ Production
• การวางแผนอัปเกรดเวอร์ชัน Next.js และ Prisma อย่างมีระบบพร้อมการใช้ Codemod

Section 27: Capstone Project

• โจทย์: พัฒนาระบบจัดการสินค้าและคำสั่งซื้อ (Product & Order Management) ให้สมบูรณ์ตั้งแต่ออกแบบ Schema ทำ Migration พัฒนา REST API พร้อม Validation
• พัฒนาส่วนติดต่อผู้ใช้ด้วย Server Components และ Server Actions ใส่ Authentication และ RBAC ครบทุกชั้น และเพิ่มการแคชด้วย use cache
• เขียน Test ครอบคลุม Unit, Integration และ E2E สร้าง Dockerfile Deploy ขึ้น Environment ทดสอบ แล้วนำเสนอผลงานและรีวิวโค้ดร่วมกัน

Section 28: สรุปและแนวทางต่อยอด

• สรุปภาพรวมสถาปัตยกรรมตลอด 5 วัน และ Checklist ก่อนนำระบบขึ้น Production
• แนวทางต่อยอด: Monorepo (Turborepo), tRPC, GraphQL, Microservices และฝั่งฐานข้อมูล Read Replica, Sharding, Redis
• การติดตามความเปลี่ยนแปลงของ Next.js และ Prisma พร้อมถาม-ตอบและคำแนะนำเฉพาะรายโปรเจกต์