พัฒนาเว็บไซต์ · WDC-70

Next.js Advanced

หลักสูตร Next.js Advanced เป็นการอบรมสร้างเว็บแอปขนาดใหญ่ด้วย Next.js 16 ทั้ง Routing ขั้นสูง Server Actions กับ Optimistic UI ระบบล็อกอินด้วย Better Auth การจัดการ State และ Cache Components จนถึง Testing และ Deploy ด้วย Docker เหมาะกับ Web Developer และ Full-stack Developer ที่ใช้ Next.js พื้นฐานได้แล้ว

อัปเดตล่าสุด 8 ต.ค. 2569

ราคาเริ่มต้น 8,550 บาท / ท่าน 9,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา18 ชั่วโมง · 3 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

Next.js เป็นเฟรมเวิร์ก React ที่ทีมพัฒนาเว็บเลือกใช้สร้างระบบจริงมากที่สุดตัวหนึ่ง ในรุ่น 16 ระบบเปลี่ยนไปมาก ทั้ง Proxy ที่มาแทน Middleware, Turbopack ที่เป็นค่าเริ่มต้น และ Cache Components ที่ทำให้การ Cache เป็นแบบเลือกเปิดเองด้วย use cache ซึ่งทีม Next.js แนะนำให้ใช้กับทุกแอปตั้งแต่รุ่น 16.4 นักพัฒนาที่เคยเขียนแบบเดิมจึงต้องปรับวิธีคิดเรื่องการดึงข้อมูล การ Cache และการแยกงานระหว่าง Server กับ Client

หลักสูตรนี้ต่อยอดจากพื้นฐาน Next.js สู่ระดับที่ใช้สร้างระบบขนาดใหญ่ เริ่มจากโครงสร้างโปรเจกต์และ Routing ขั้นสูง จัดการฟอร์มและข้อมูลด้วย Server Actions, Zod และ Optimistic UI ทำระบบล็อกอินและกำหนดสิทธิ์ด้วย Better Auth เชื่อมฐานข้อมูลด้วย ORM สร้างตารางข้อมูลที่ประมวลผลฝั่ง Server แยก URL State กับ Global State ให้ถูกที่ ปรับความเร็วด้วย Cache Components แล้วเขียน Test และ Deploy ด้วย Docker กับ GitHub Actions ปิดท้ายด้วย Workshop สร้างระบบ Dashboard ครบวงจร (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Advanced)

สิ่งที่คุณจะได้รับ

ออกแบบโครงสร้างโปรเจกต์ขนาดใหญ่และใช้ Parallel Routes, Intercepting Routes และ Route Groups ได้
แยกหน้าที่ Server Component กับ Client Component และเขียน Proxy ได้อย่างเหมาะสม
จัดการฟอร์มและการแก้ข้อมูลด้วย Server Actions, useActionState, Zod และ useOptimistic
ทำระบบล็อกอินและกำหนดสิทธิ์ตามบทบาท (RBAC) ด้วย Better Auth อย่างปลอดภัย
จัดการ URL State และ Global State ได้ถูกที่ด้วย nuqs และ Zustand
ใช้ Cache Components, use cache, cacheTag และ updateTag ปรับความเร็วของหน้าเว็บ
เขียน Unit Test และ E2E Test ด้วย Vitest และ Playwright
Deploy ด้วย Docker แบบ Standalone และทำ CI/CD ด้วย GitHub Actions

หลักสูตรนี้เหมาะสำหรับ

Web Developer ที่ใช้ Next.js พื้นฐานได้แล้วและต้องการต่อยอดสู่ระดับ Senior หรือ Tech Lead
Full-stack Developer ที่ต้องการความเชี่ยวชาญด้าน React และ Next.js รุ่นปัจจุบัน
ทีมที่ดูแลแอป Next.js รุ่นเก่าและต้องการย้ายมาใช้แนวทางของ Next.js 16
ผู้ที่ผ่านหลักสูตร Basic Next.js สำหรับผู้เริ่มต้นมาแล้ว

พื้นฐานของผู้เข้าอบรม

เข้าใจ Next.js App Router พื้นฐาน เช่น โครงสร้างไฟล์, Page, Layout และ Link
เขียน React ด้วย Hooks ได้ เช่น useState, useEffect และ useTransition
เขียน TypeScript และ Tailwind CSS ได้เบื้องต้น
เข้าใจพื้นฐาน HTTP, API และฐานข้อมูล SQL
โน้ตบุ๊กที่ติดตั้ง Node.js 24 LTS, Docker Desktop และ VS Code ได้ พร้อมบัญชี GitHub ของตนเอง

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Next.js Advanced ปรับเนื้อหาให้ตรงกับ Next.js 16.4 และ React 19.3 อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab บนโปรเจกต์ Dashboard ชุดเดียวที่ต่อเติมตลอดหลักสูตร ระดับ Advanced ต่อยอดจากหลักสูตร Basic Next.js สำหรับผู้เริ่มต้น ใช้

Cache Components ที่ทีม Next.js แนะนำสำหรับทุกแอป ใช้ Proxy แทน Middleware เปลี่ยนตัวอย่างระบบล็อกอินจาก Auth.js เป็น Better Auth พร้อมอธิบายความต่างสำหรับทีมที่ใช้ Auth.js อยู่ และเพิ่มหัวข้อ Server Component กับ Client Component ชั้นข้อมูลด้วย ORM และ CI/CD ด้วย GitHub Actions ผู้เรียนได้ Lab Guide ซอร์สโค้ดครบทุก Lab และไฟล์สำหรับ Deploy กลับไปใช้งานต่อ

Day 1 สถาปัตยกรรม Routing และ Server Actions

Section 1: Lab: โครงสร้างโปรเจกต์สำหรับระบบขนาดใหญ่

สิ่งที่เปลี่ยนใน Next.js 16: Turbopack เป็นค่าเริ่มต้น, Proxy และ Cache Components
จัดโฟลเดอร์แบบ Feature-based เทียบกับ Type-based และ Private Folder
ตั้งค่า TypeScript แบบเข้มงวด, Path Alias, ESLint และ Prettier
Typed Routes และการจัดการ Environment Variables อย่างปลอดภัย
Lab: สร้างโปรเจกต์ Dashboard ตั้งต้นด้วย create-next-app

Section 2: Routing ขั้นสูง

Route Groups และหลาย Layout สำหรับผู้ใช้ต่างบทบาท เช่น Admin กับ User
Parallel Routes (@folder) แสดงหลาย Panel ที่โหลดแยกกันในหน้าเดียว
Intercepting Routes ทำ Modal ที่มี URL ของตัวเองและเปิดเป็นหน้าเต็มเมื่อ Refresh
loading, error, not-found และ Streaming ด้วย Suspense
Lab: หน้า Gallery ที่เปิดรูปเป็น Modal และ Dashboard หลาย Panel

Section 3: Server Component, Client Component และ Proxy

เส้นแบ่ง use client และการส่ง Props ข้ามขอบเขต Server กับ Client
ดึงข้อมูลใน Server Component และป้องกันโค้ดฝั่ง Server รั่วไป Client
Proxy (proxy.ts ที่มาแทน middleware.ts): Redirect, Rewrite และจัดการ Header
Route Handler สำหรับ Webhook และ API ภายนอก
Lab: Proxy ตรวจ Cookie แล้วพาผู้ใช้ที่ยังไม่ล็อกอินไปหน้า Login

Section 4: Lab: Server Actions และฟอร์ม

Server Actions เชิงลึก: ส่ง Argument ด้วย bind และตรวจสิทธิ์ทุกครั้ง
useActionState จัดการสถานะฟอร์มและ Error จาก Server
Zod 4 ตรวจข้อมูลด้วย Schema เดียวกันทั้งฝั่ง Client และ Server
useFormStatus และ Pending State ของปุ่ม
Lab: ฟอร์มเพิ่มและแก้ไขข้อมูลพร้อมแสดง Error ทีละช่อง

Section 5: Optimistic UI และประสบการณ์ผู้ใช้

useOptimistic ทำให้หน้าเว็บตอบสนองทันทีและย้อนกลับเมื่อเกิด Error
useTransition สำหรับงานที่ไม่ต้องบล็อกหน้าจอ
แจ้งผลจาก Server Actions ด้วย Toast และจัดการ Error อย่างเป็นระบบ
View Transitions ใน React 19.3 สำหรับการเปลี่ยนหน้าที่ลื่นไหล
Lab: ปุ่ม Like และรายการ Todo แบบ Optimistic

Day 2 Authentication ข้อมูล และ State

Section 6: Lab: ชั้นข้อมูลด้วย ORM

รัน PostgreSQL ด้วย Docker และออกแบบ Schema
Drizzle ORM หรือ Prisma: Schema, Migration และ Seed ข้อมูล
แยก Data Access Layer และใช้ server-only ป้องกันการเรียกจาก Client
Transaction และการป้องกัน N+1 Query
Lab: ชั้นข้อมูลของระบบ Dashboard ที่ใช้ต่อทั้งหลักสูตร

Section 7: Lab: Authentication ด้วย Better Auth

ภาพรวมทางเลือกระบบล็อกอินของ Next.js และเหตุผลที่เลือก Better Auth
ติดตั้ง Better Auth, ต่อฐานข้อมูล และ Route Handler สำหรับ /api/auth
ล็อกอินด้วย Email และ Password และ OAuth กับ Google หรือ GitHub
อ่าน Session ใน Server Component, Server Actions และฝั่ง Client
Lab: หน้า Sign up, Sign in และ Sign out ที่ใช้งานได้จริง

Section 8: Authorization และ Role-Based Access Control

กำหนด Role และ Permission ด้วย Admin Plugin ของ Better Auth
ป้องกัน Route, Component และ Server Actions ตามสิทธิ์
ตรวจสิทธิ์ใกล้ข้อมูลเสมอ ไม่พึ่ง Proxy อย่างเดียว
ความต่างเมื่อทีมใช้ Auth.js อยู่แล้ว และแนวทางย้ายระบบ
Lab: หน้า Admin ที่เข้าได้เฉพาะผู้มีสิทธิ์

Section 9: Lab: Data Table ฝั่ง Server ด้วย shadcn/ui

ตั้งค่า shadcn/ui กับ Tailwind CSS 4 และการปรับ Theme รวมถึง Dark Mode
Data Table ที่แบ่งหน้า เรียงลำดับ และกรองข้อมูลบน Server
สร้าง Component ที่ใช้ซ้ำได้จาก Primitive ของ shadcn/ui
ฟอร์มใน Dialog ที่ทำงานร่วมกับ Server Actions
Lab: หน้าจัดการผู้ใช้และคำสั่งซื้อพร้อมค้นหาและกรอง

Section 10: URL State และ Global State

ทำไมไม่ใช้ useState ทุกอย่าง: แยก Server State, URL State และ Client State
nuqs เก็บ Filter, Search และหน้าปัจจุบันไว้ใน URL แบบ Type-safe
Zustand สำหรับสถานะ UI เช่น Sidebar และค่าตั้งค่าที่ซับซ้อน
หลีกเลี่ยงการซ้ำข้อมูลระหว่าง Server กับ Client Store
Lab: ตารางที่แชร์ลิงก์พร้อม Filter ได้

Day 3 Performance, Testing และ Deploy

Section 11: Lab: Cache Components

เปิด cacheComponents และเข้าใจโมเดลการ Cache แบบเลือกเปิดเอง
use cache, cacheLife และ cacheTag ระดับฟังก์ชันและ Component
updateTag และ revalidateTag ล้าง Cache เฉพาะจุดหลังแก้ข้อมูล
Static Shell คู่กับ Dynamic Content ใน Suspense และ use cache: private
Lab: Dashboard ที่โหลดเร็วแต่ข้อมูลส่วนตัวยังถูกต้อง

Section 12: Performance และ Core Web Vitals

วัด LCP, INP และ CLS และอ่านผลจาก Lighthouse
next/image, next/font และการโหลด Script ภายนอก
Prefetch ของ Link และการเลื่อนงานที่ไม่จำเป็นออกไป
วิเคราะห์ขนาด Bundle และรู้จัก React Compiler
Lab: ปรับหน้าแรกให้คะแนน Core Web Vitals ดีขึ้น

Section 13: Lab: Testing

Unit Test ด้วย Vitest สำหรับ Utility, Schema และ Server Actions
ทดสอบ Component ด้วย Testing Library
E2E Test ด้วย Playwright จำลองการล็อกอินและใช้งานจริง
แนวคิด Error Tracking และ Logging บน Production
Lab: ชุด Test ของฟอร์มและหน้า Admin

Section 14: Lab: Deploy ด้วย Docker และ CI/CD

จัดการ Environment Variables สำหรับ Dev, Staging และ Production
output standalone และ Dockerfile แบบ Multi-stage
รันแอปคู่ PostgreSQL ด้วย Docker Compose
GitHub Actions: Lint, Test, Build และสร้าง Image อัตโนมัติ
ทางเลือก Hosting: Server ของตนเองหรือ Platform แบบ Managed

Section 15: Workshop: ระบบ Dashboard ครบวงจร

โจทย์: ระบบจัดการคำสั่งซื้อที่มีผู้ใช้หลายบทบาท
ออกแบบ Route, ชั้นข้อมูล และสิทธิ์ แล้วลงมือสร้างด้วยแนวทางที่เรียนมา
ใส่ Cache, Test และ Pipeline ให้พร้อม Deploy
นำเสนอผลงาน ใช้ AI Assistant ช่วยเขียนโค้ดอย่างมีการตรวจทาน และสรุปแนวทางต่อยอด

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

Server Actions ใน Next.js คืออะไร ใช้ทำอะไร

Server Actions คือฟังก์ชันที่ประกาศด้วย use server แล้วทำงานบน Server แต่เรียกจากฟอร์มหรือปุ่มฝั่ง Client ได้โดยไม่ต้องเขียน API แยก เหมาะกับงานบันทึก แก้ไข หรือลบข้อมูล ใช้คู่กับ useActionState เพื่อแสดงสถานะและ Error ของฟอร์ม และตรวจข้อมูลด้วย Zod สิ่งสำคัญคือต้องตรวจสิทธิ์ผู้ใช้ในทุก Action เพราะ Action ถูกเรียกจากภายนอกได้เหมือน Endpoint ทั่วไป

Optimistic UI คืออะไร ทำใน Next.js อย่างไร

Optimistic UI คือการแสดงผลลัพธ์บนหน้าจอทันทีโดยถือว่าการบันทึกจะสำเร็จ แล้วค่อยยืนยันหรือย้อนกลับเมื่อ Server ตอบกลับ ทำให้ผู้ใช้รู้สึกว่าเว็บเร็ว เช่น กด Like แล้วตัวเลขเพิ่มทันที ใน Next.js ใช้ Hook useOptimistic ของ React คู่กับ Server Actions ถ้า Action ล้มเหลว ค่าบนหน้าจอจะกลับเป็นค่าจริงเอง และควรแจ้งผู้ใช้ด้วยข้อความที่เข้าใจง่าย

Cache Components และ use cache ใน Next.js 16 ทำงานอย่างไร

เมื่อเปิด cacheComponents ใน next.config การ Cache จะเป็นแบบเลือกเปิดเอง ฟังก์ชันหรือ Component ที่ใส่ use cache จะถูก Cache ไว้ กำหนดอายุด้วย cacheLife และติดป้ายด้วย cacheTag เมื่อข้อมูลเปลี่ยนก็ล้างเฉพาะส่วนนั้นด้วย updateTag หรือ revalidateTag ส่วนที่ต้องสดทุกครั้ง เช่น ข้อมูลของผู้ใช้ที่ล็อกอิน ให้ห่อด้วย Suspense เพื่อ Stream ตามมา ตั้งแต่ Next.js 16.4 ทีม Next.js แนะนำแนวทางนี้สำหรับทุกแอป

หลักสูตร Next.js Advanced เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับ Web Developer และ Full-stack Developer ที่ใช้ Next.js พื้นฐานได้แล้วและต้องการต่อยอดสู่ระดับ Senior หรือ Tech Lead รวมถึงทีมที่ดูแลแอป Next.js รุ่นเก่าและผู้ที่ผ่านหลักสูตร Basic Next.js มาแล้ว ควรเข้าใจ App Router, React Hooks, TypeScript และ Tailwind CSS เบื้องต้น และพื้นฐาน HTTP, API และฐานข้อมูล SQL

เรียนจบหลักสูตร Next.js Advanced แล้วทำอะไรได้บ้าง

วางโครงสร้างโปรเจกต์ Next.js 16 ขนาดใหญ่ ใช้ Routing ขั้นสูงและ Proxy จัดการฟอร์มด้วย Server Actions, Zod และ Optimistic UI ทำระบบล็อกอินและกำหนดสิทธิ์ด้วย Better Auth จัดการ State ให้ถูกที่ ปรับความเร็วด้วย Cache Components เขียน Test ด้วย Vitest และ Playwright และ Deploy ด้วย Docker กับ GitHub Actions ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร Next.js Advanced ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกกับโครงสร้างโปรเจกต์ ระบบล็อกอิน หรือฐานข้อมูลที่ทีมใช้อยู่ หรือเน้นการย้ายแอป Next.js รุ่นเก่ามาเป็นรุ่น 16 ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449