การพัฒนา Web Application ด้วย Next.js 16 และ React (App Router, Server Components, REST API)

ทำไมต้องเรียนหลักสูตรนี้

Next.js คือเฟรมเวิร์กที่ต่อยอดจาก React ให้ทำเว็บแอปได้ครบในโปรเจกต์เดียว ทั้งการแบ่งหน้า การเรนเดอร์ฝั่งเซิร์ฟเวอร์ การดึงข้อมูล การทำ SEO และการนำขึ้นใช้งานจริง Next.js 16 ออกเมื่อวันที่ 21 ตุลาคม 2025 และเวอร์ชันย่อยล่าสุดคือ 16.4 (6 ตุลาคม 2026) ซึ่งมาพร้อม React 19.3 ตามนโยบายซัพพอร์ตของ nextjs.org เวอร์ชัน 16 อยู่ในสถานะ Active LTS ส่วนเวอร์ชัน 15 เหลือเพียงการแก้บั๊กร้ายแรงและช่องโหว่ความปลอดภัย และเวอร์ชัน 14 ลงไปไม่ได้รับการสนับสนุนแล้ว โปรเจกต์ที่ยังอยู่บนเวอร์ชันเก่าจึงควรวางแผนอัปเกรด

Next.js 16 เปลี่ยนไปจากที่หลายคนคุ้นเคยพอสมควร Turbopack กลายเป็นตัว build เริ่มต้น ไฟล์ middleware.ts ถูกแทนด้วย proxy.ts ค่าอย่าง params, cookies() และ headers() ต้องใช้ await คำสั่ง next lint ถูกถอดออก และตั้งแต่ 16.4 ทีมผู้พัฒนาแนะนำให้ทุกแอปใช้ Cache Components ('use cache') ซึ่งเปิดเป็นค่าเริ่มต้นในโปรเจกต์ใหม่แล้ว บทความสอนและตัวอย่างโค้ดจำนวนมากบนอินเทอร์เน็ตยังเป็นของเวอร์ชันเก่าหรือของ Pages Router ทำให้คนที่เริ่มเรียนเองสับสนได้ง่าย

หลักสูตรนี้สอน Next.js 16 แบบ App Router ตามเวอร์ชันเสถียรล่าสุด โดยลงมือสร้างเว็บแอปหนึ่งระบบตั้งแต่ต้นจนขึ้นเซิร์ฟเวอร์ ระบบนี้คุยกับ REST API ที่แยกอยู่อีกฝั่ง ซึ่งเป็นรูปแบบที่เจอบ่อยที่สุดในงานจริง เมื่อจบหลักสูตรผู้เรียนจะรู้ว่าโค้ดส่วนไหนควรอยู่บนเซิร์ฟเวอร์ ส่วนไหนควรอยู่บนเบราว์เซอร์ และทำไม เพื่อให้กลับไปเริ่มโปรเจกต์ใหม่หรือปรับปรุงโปรเจกต์เดิมได้อย่างมั่นใจ

สอนจากประสบการณ์ระบบจริงที่ใช้ Next.js

HANUMANIT พัฒนา F00d ระบบบริหารร้านอาหาร (f00d.app) แบบ SaaS ที่รองรับหลายร้านในระบบเดียว ตั้งแต่ลูกค้าสแกน QR สั่งอาหาร จอครัว แคชเชียร์ ขายหน้าร้าน เดลิเวอรี คลังวัตถุดิบ จนถึงรายงานยอดขาย หน้าเว็บทั้งหมดเขียนด้วย Next.js 16 คู่กับ React 19, TypeScript และ Tailwind CSS ส่วนหลังบ้านเป็น REST API ที่เขียนด้วย FastAPI ในห้องอบรมเราจะเปิดตัวอย่างการตัดสินใจจริงจากระบบนี้ เช่น

• เรนเดอร์ฝั่งเซิร์ฟเวอร์เฉพาะหน้าที่ต้องการ หน้าสาธารณะที่ต้องติด Google เช่น บทความ หน้าร้านของแต่ละร้าน และ sitemap ดึงข้อมูลบนเซิร์ฟเวอร์ ผ่านเครือข่ายภายในของ Docker ส่วนหน้าทำงานของพนักงานโหลดข้อมูลบนเบราว์เซอร์ ในห้องเราจะเขียนหน้าเหล่านี้ใหม่ด้วย Server Components ให้เห็นความต่าง
• ตัวเรียก API ตัวเดียวทั้งระบบ แนบ token ให้ทุกคำขอ เมื่อ token หมดอายุจะขอใหม่เพียงครั้งเดียวแม้มีหลายคำขอพร้อมกัน แล้วส่งคำขอเดิมซ้ำ และแปลงข้อความผิดพลาดของ FastAPI ทั้งแบบข้อความและแบบรายการ (422) ให้อ่านรู้เรื่อง
• ที่เก็บ token เป็นการตัดสินใจด้านความปลอดภัย F00d เก็บ token ไว้ใน localStorage และบันทึกไว้ในเอกสารว่าเป็นความเสี่ยงที่ยอมรับ หากเว็บมีช่องโหว่ XSS ในหลักสูตรเราจะทำแบบ httpOnly cookie คู่กับ Server Actions และ proxy.ts แล้วเทียบข้อดีข้อเสียของทั้งสองแบบ
• ล็อกอินด้วย Google และ Microsoft ให้หลังบ้านเป็นคนคุยกับผู้ให้บริการ แล้วส่ง token กลับมาทางส่วน fragment (#) ของ URL ซึ่งเบราว์เซอร์ไม่ส่งต่อไปยังเซิร์ฟเวอร์
• สิทธิ์ตามบทบาทและการรอ hydration หน้าแต่ละกลุ่มตรวจบทบาทผู้ใช้ เช่น ครัว แคชเชียร์ ผู้ดูแลร้าน และผู้ดูแลระบบ และต้องรอให้สถานะล็อกอินโหลดจากเครื่องเสร็จก่อน ไม่อย่างนั้นผู้ใช้จะถูกเด้งไปหน้าล็อกอินทุกครั้งที่กดรีเฟรช
• ระบบหลายร้านและสวิตช์โมดูล ร้านเปิดปิดโมดูล เช่น โต๊ะ ครัว เดลิเวอรี ได้เอง หน้าเว็บจึงมีตัวครอบหน้าที่แสดงข้อความแทนเนื้อหาเมื่อโมดูลปิด และล้างข้อมูลร้านเดิมทุกครั้งที่ล็อกอินหรือล็อกเอาต์ ไม่ให้การตั้งค่าของร้านก่อนหน้าค้างอยู่
• อัปเดตแบบเรียลไทม์ด้วย Socket.IO แยกการเชื่อมต่อของพนักงานกับของลูกค้าที่โต๊ะ ใช้ห้องตามร้านและตามโต๊ะ และส่ง token ล่าสุดทุกครั้งที่เชื่อมต่อใหม่ เพื่อให้จอครัวที่เปิดทิ้งไว้ทั้งวันยังทำงานต่อได้หลัง token หมดอายุ
• สองภาษาโดยไม่เปลี่ยน URL ใช้ข้อความภาษาไทยเป็นคีย์ของคำแปลภาษาอังกฤษ ลิงก์ QR ที่พิมพ์ติดโต๊ะจึงใช้ได้ตลอด และโหลดภาษาที่เลือกไว้หลังหน้าเว็บแสดงผลแล้ว เพื่อไม่ให้ HTML จากเซิร์ฟเวอร์กับเบราว์เซอร์ไม่ตรงกัน
• ค่า NEXT_PUBLIC_* ถูกฝังตอน build จึงต้องส่งเข้าไปเป็น build argument ของ Docker และใช้ rewrites ส่งคำขอ /api ต่อไปยังหลังบ้าน
• คุมคุณภาพก่อนขึ้นระบบ Jenkins รัน TypeScript, ESLint และ Vitest คู่กับ Testing Library และ MSW ทุกครั้งก่อน deploy เพราะตั้งแต่ Next.js 16 คำสั่ง build ไม่ตรวจ lint ให้แล้ว

F00d ปัจจุบันใช้ Next.js 16.3 แบบ Pages Router ซึ่งยังได้รับการรองรับ แต่ทีม Next.js แนะนำ App Router สำหรับฟีเจอร์ใหม่ของ React หลักสูตรนี้จึงสอน App Router เป็นหลัก และใช้หน้าจริงของ F00d เป็นโจทย์ฝึกย้ายจาก Pages Router มา App Router ทีละหน้า

สิ่งที่จะได้ลงมือทำและผลลัพธ์กลับบ้าน

• เว็บแอปตัวอย่าง 1 ระบบ มีหน้าสาธารณะที่ทำ SEO ได้ หน้าหลังบ้านที่ต้องล็อกอิน สิทธิ์ตามบทบาท ฟอร์มบันทึกข้อมูล และหน้าจอที่อัปเดตแบบเรียลไทม์ โดยต่อกับ REST API ตัวอย่างที่ทีมงานเตรียมไว้
• โปรเจกต์ตั้งต้นที่ใช้งานต่อได้ ตั้งค่า TypeScript, Tailwind CSS, ESLint, Vitest, Docker และตัวแปรสภาพแวดล้อมไว้พร้อม เอาไปเริ่มงานจริงได้ทันที
• แผนผังตัดสินใจ Server หรือ Client ใช้ตอบว่า component ไหนควรเป็นแบบไหน ข้อมูลไหนควรแคช และข้อมูลไหนต้องสดทุกครั้ง
• เช็กลิสต์ย้ายจาก Pages Router มา App Router และเช็กลิสต์อัปเกรดจาก Next.js 14/15 มา 16
• ใบประกาศนียบัตรออนไลน์ ที่ตรวจสอบได้ สำหรับผู้ที่เข้าอบรมครบ

โครงสร้างเนื้อหาหลักสูตร (3 วัน · 18 ชั่วโมง)

วันที่ 1: พื้นฐาน Next.js 16 และ App Router

• รู้จัก Next.js 16
  • Next.js เพิ่มอะไรให้ React และเหมาะกับงานแบบไหน เทียบกับการทำ React อย่างเดียว
  • เตรียมเครื่อง: Node.js 20.9 ขึ้นไป (แนะนำรุ่น LTS ล่าสุด), npm และ VS Code
  • สร้างโปรเจกต์ด้วย npx create-next-app@latest พร้อม TypeScript, Tailwind CSS, ESLint และ App Router
  • อ่านโครงสร้างโฟลเดอร์ app/, public/, next.config.ts และรู้จัก Turbopack ที่เป็นตัว build เริ่มต้น
• ระบบเส้นทางของ App Router
  • ไฟล์พิเศษ layout.tsx, page.tsx, loading.tsx, error.tsx และ not-found.tsx
  • เส้นทางแบบ dynamic เช่น app/r/[slug]/page.tsx และการอ่าน params ที่ต้อง await ใน Next.js 16
  • จัดกลุ่มเส้นทางด้วย Route Groups แยก layout ของหน้าสาธารณะกับหน้าหลังบ้าน
  • ลิงก์และการเปลี่ยนหน้าด้วย <Link>, useRouter และการ prefetch
• Server Components กับ Client Components
  • ค่าเริ่มต้นเป็น Server Component: ดึงข้อมูลได้ตรง ไม่ส่ง JavaScript ไปเบราว์เซอร์
  • เมื่อไรต้องใส่ 'use client': state, event, hooks และ API ของเบราว์เซอร์
  • วางขอบเขตระหว่างสองฝั่งให้เล็กที่สุด และส่ง props ข้ามขอบเขตอย่างถูกต้อง
  • ปัญหา hydration mismatch ที่พบบ่อย เช่น ค่าใน localStorage วันที่และเวลา พร้อมวิธีแก้แบบที่ F00d ใช้
• หน้าตาและ SEO
  • จัดหน้าด้วย Tailwind CSS ทำหน้าเว็บที่ใช้งานบนแท็บเล็ตและมือถือได้
  • ฟอนต์ภาษาไทยด้วย next/font และรูปภาพด้วย next/image รวมถึงการอนุญาตโดเมนรูปด้วย remotePatterns
  • Metadata API, Open Graph และสร้าง sitemap.xml กับ robots.txt จากข้อมูลจริง

วันที่ 2: ข้อมูล ฟอร์ม และระบบสมาชิก

• ดึงข้อมูลจาก REST API
  • เรียก API จาก Server Component ด้วย fetch และแยก URL ภายในเครือข่ายเซิร์ฟเวอร์กับ URL ที่เบราว์เซอร์ใช้
  • จัดการตัวแปรสภาพแวดล้อม: ค่าลับที่อยู่บนเซิร์ฟเวอร์เท่านั้น กับค่า NEXT_PUBLIC_* ที่ถูกฝังตอน build
  • จัดการข้อผิดพลาดจาก API ให้เป็นรูปแบบเดียวกัน และใช้ notFound() เมื่อไม่พบข้อมูล
  • Route Handlers (app/api/.../route.ts) เทียบกับการใช้ rewrites ส่งต่อไปยังหลังบ้าน
• แคชและการแสดงผลแบบ streaming
  • Cache Components: 'use cache', cacheLife และ cacheTag ที่ทีม Next.js แนะนำตั้งแต่ 16.4
  • แสดงส่วนที่พร้อมก่อนด้วย <Suspense> และ loading.tsx
  • ล้างแคชเมื่อข้อมูลเปลี่ยนด้วย revalidateTag และ updateTag
  • บังคับให้หน้าการตลาดเป็นหน้าคงที่ด้วย ensureStatic และเลือกว่าข้อมูลไหนต้องสดทุกครั้ง
• ฟอร์มและ Server Actions
  • เขียน Server Action รับข้อมูลจากฟอร์มและส่งต่อไปยัง API
  • ตรวจข้อมูลด้วย Zod ใช้ schema เดียวกันทั้งฝั่งเบราว์เซอร์และเซิร์ฟเวอร์
  • แสดงสถานะกำลังบันทึกและข้อผิดพลาดด้วย useActionState และ useFormStatus
  • อัปโหลดรูปภาพและไฟล์ไปยังหลังบ้าน
• ระบบสมาชิกและสิทธิ์
  • ล็อกอินกับ API ที่ออก JWT (access token และ refresh token) แล้วเก็บไว้ใน httpOnly cookie
  • ต่ออายุ token อัตโนมัติ และออกจากระบบทุกอุปกรณ์เมื่อเปลี่ยนรหัสผ่าน
  • ล็อกอินด้วย Google และ Microsoft ผ่านหลังบ้าน
  • ป้องกันหน้าตามบทบาทด้วย proxy.ts (ชื่อใหม่ของ middleware) และตรวจสิทธิ์ซ้ำใน Server Component และ Server Action
  • ระบบหลายร้าน: เก็บร้านที่กำลังใช้งาน และซ่อนเมนูหรือหน้าที่ร้านไม่ได้เปิดใช้

วันที่ 3: เรียลไทม์ การทดสอบ และการนำขึ้นใช้งานจริง

• สถานะฝั่ง client และเรียลไทม์
  • เมื่อไรต้องมี state กลาง และใช้ Zustand อย่างพอดี เช่น ตะกร้าสินค้า และการตั้งค่าบนเครื่อง
  • เชื่อมต่อ Socket.IO ใน Client Component ส่ง token ตอนเชื่อมต่อ รับเหตุการณ์ตามห้อง และเชื่อมต่อใหม่เมื่อหลุด
  • ประสานข้อมูลเรียลไทม์กับข้อมูลที่เรนเดอร์จากเซิร์ฟเวอร์ด้วย router.refresh()
  • ทำหน้าเว็บสองภาษา ไทยและอังกฤษ
• คุณภาพของโค้ด
  • เขียน Unit test และ Component test ด้วย Vitest และ Testing Library
  • จำลอง API ด้วย MSW เพื่อทดสอบหน้าเว็บโดยไม่ต้องเปิดหลังบ้าน
  • ตรวจชนิดข้อมูลด้วย tsc --noEmit และตรวจโค้ดด้วย ESLint แบบ flat config แทน next lint ที่ถูกถอดออก
  • แนะนำการทดสอบแบบ End-to-End ด้วย Playwright
• นำขึ้นเซิร์ฟเวอร์จริง
  • เขียน Dockerfile แบบหลายขั้น เทียบการรัน next start ทั้งโปรเจกต์กับ output: 'standalone' ที่ได้ image เล็กกว่า
  • ส่งค่า NEXT_PUBLIC_* เป็น build argument ตั้ง health check และวางหลัง reverse proxy
  • CI/CD ด้วย Jenkins: ตรวจโค้ดและรันเทสต์ก่อน deploy ทุกครั้ง ตามแบบที่ F00d ใช้
  • ติดตามนโยบายซัพพอร์ตและอัปเดตความปลอดภัยของ Next.js และอัปเกรดด้วย codemod หรือ next upgrade
• ย้ายจาก Pages Router มา App Router
  • เทียบแนวคิดทีละเรื่อง: getServerSideProps, _app.tsx, _document.tsx, next/router และ API Routes
  • ให้สองระบบอยู่ร่วมกันในโปรเจกต์เดียว แล้วย้ายทีละหน้า
  • ลงมือย้ายหน้าตัวอย่างจาก F00d เช่น หน้าบทความและหน้าร้าน และสิ่งที่ต้องระวังกับไลบรารีที่ใช้ได้เฉพาะฝั่งเบราว์เซอร์

สิ่งที่ต้องเตรียมสำหรับเข้าอบรม

• คอมพิวเตอร์โน้ตบุ๊ก Windows 10/11, macOS หรือ Linux แรมอย่างน้อย 8 GB
• ติดตั้ง Node.js 20.9 ขึ้นไป (แนะนำรุ่น LTS ล่าสุด), Git, Docker Desktop และ VS Code (ทีมงานส่งคู่มือติดตั้งให้ก่อนวันอบรม)
• บัญชี GitHub สำหรับเก็บโปรเจกต์ที่ทำในห้อง

หมายเหตุ หลักสูตรนี้ไม่ได้สอน React ตั้งแต่ศูนย์ ผู้ที่ยังไม่เคยเขียน React ควรศึกษาเรื่อง component, props, state และ hooks มาก่อน API ตัวอย่างที่ใช้ในห้องเตรียมไว้ให้แล้ว ผู้เรียนไม่ต้องเขียนหลังบ้านเอง Next.js ออกเวอร์ชันย่อยค่อนข้างถี่ เนื้อหาจะปรับตามเวอร์ชันเสถียรล่าสุดในช่วงที่เปิดอบรม ตัวอย่างจากระบบ F00d เป็นโค้ดที่ปรับให้เหมาะกับการสอน ไม่มีข้อมูลของร้านค้าหรือลูกค้าจริง