จัดอบรม Next.js 16: The AI-Native Developer Masterclass โดยสถาบันไอทีจีเนียส

อบรมออนไลน์ (สอนสด)

19 - 28 มีนาคม 2026

อาจารย์สามิตร โกยม

15 ชั่วโมง

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

Day 1: สถาปัตยกรรม Next.js 16 และระบบความปลอดภัย Better Auth

Section 0: Setup Tools and Resources — ติดตั้งเครื่องมือที่จำเป็น (VS Code, Node.js, Git, Postman), ตรวจสอบการติดตั้งบน Windows / Mac OS / Linux, สมัครและเตรียม Neon Database
Section 1: รู้จัก Next.js v.16 พื้นฐาน — Next.js คืออะไร? ทำไมต้อง v.16?, App Router vs Pages Router, React Server Components (RSC), Server Actions, Streaming & Suspense, Caching & Revalidation
Section 2: Project Setup & Folder Structure — การเริ่มต้น Next.js 16 ด้วย TypeScript, Tailwind CSS, การวาง Folder Structure แบบ Scalable, รู้จัก shadcn/ui, การติดตั้งและตั้งค่า shadcn/ui, การใช้ Button, Input, Card, Label Components, การปรับแต่ง Theme และ Design System, สร้าง Landing Page, สร้างหน้า Register และ Login UI, สร้างหน้า Dashboard แสดง User Profile
Section 3: รู้จัก Better Auth พื้นฐาน — Better Auth คืออะไร? ทำไมเลือกใช้?, สถาปัตยกรรมการทำงาน, Core Schema (4 ตาราง: User, Session, Account, Verification), Database Adapters & CLI
Section 4: รู้จัก Prisma ORM พื้นฐาน — ORM คืออะไร? ทำไมต้องใช้?, Prisma คืออะไร? องค์ประกอบหลัก, เปรียบเทียบ Prisma vs Drizzle ORM, Prisma CLI Commands & Workflow
Section 5: Prisma & Neon Setup — การเชื่อมต่อ PostgreSQL บน Neon Serverless, การทำ Database Schema สำหรับ Better Auth, การ Push Schema และ Prisma Studio
Section 6: Basic Next.js RestAPI — พื้นฐาน REST API ใน Next.js 16 — Route Handlers, การสร้าง API Routes, การใช้ Route Handlers
Section 7: Better Auth Integration — ติดตั้งและตั้งค่า Better Auth (Server-side & Client-side), อัพเดทหน้า Register และ Login UI เรียกใช้ Better Auth, การตรวจสอบ Session ใน Server Component
Section 8: Social Login (Google, GitHub, LINE, Facebook) — ตั้งค่า Google OAuth 2.0 Client, ตั้งค่า GitHub OAuth App, ตั้งค่า LINE Login Channel, ตั้งค่า Facebook Login App, เพิ่มปุ่ม Social Login ใน UI
Section 9: Update Main Layout & Dashboard — เพิ่ม Sidebar ใน Main Layout, ปรับปรุง Main Layout ให้รองรับการแสดงผลที่ดีขึ้น
Section 10: Role-Based Access Control (RBAC) — Role-based Access Control (Admin/User), Better Auth Admin Plugin APIs, สร้าง Seed Script สำหรับ Admin เริ่มต้น, สร้าง Custom API Route สำหรับเปลี่ยน Role, ตรวจสอบสิทธิ์ใน Server Component, สรุป Better Auth Admin Plugin APIs, ทดสอบ RBAC ด้วย curl, Access Control ของ Better Auth, การออกแบบระบบ Access Control ด้วย Better Auth, Global Impersonation Banner, Update User Profile
Section 11: Multi-Factor Authentication (MFA) & Email Features — อัปเดต Prisma Schema สำหรับ 2FA, ตั้งค่า Two-Factor Plugin (Server & Client), เพิ่ม TOTP UI ในหน้า Profile, สร้างหน้า Verify 2FA (Sign-in Flow), Verify Email ผ่าน Gmail (Email Provider), สร้างหน้า Verify Email, Forgot Password ผ่าน Gmail, สร้างหน้า Forgot Password

Day 2: การสร้างฐานความรู้ AI ด้วย Vector Database และ Ingestion Pipeline

Section 12: Embeddings Fundamentals — ทำความเข้าใจ Text Embeddings คืออะไร, การแปลงข้อความเป็นเวกเตอร์ตัวเลข, Cosine Similarity และการค้นหาเชิงความหมาย
Section 13: pgVector on Neon — การตั้งค่า Extension pgVector, การสร้างตารางเก็บข้อมูล Vector, การเขียน SQL Query สำหรับ Similarity Search
Section 14: Document Processing — Document Loader สำหรับ TXT, CSV และ PDF, Text Splitting: การแบ่งข้อความเป็น Chunks, Chunking Strategies
Section 15: Ingestion Pipeline — สร้าง Script อัตโนมัติสำหรับ Ingestion, การแปลง Chunks เป็น Embeddings ด้วย OpenAI, การบันทึก Embeddings ลงใน pgVector, Workshop: นำเอกสารองค์กรเข้าสู่ Vector Database
Section 16: Similarity Search & Testing — การเขียน Query เพื่อค้นหาข้อมูลจากความหมาย, ทดสอบ Similarity Search ด้วย Prisma, Workshop: สร้าง API Endpoint สำหรับ Search

Day 3: พัฒนา Chatbot API ด้วยเทคนิค RAG (Retrieval-Augmented Generation)

Section 17: ทบทวน RAG Architecture — ทบทวน Vector Database และ Similarity Search จาก Day 2, ทำความเข้าใจ RAG Pipeline ทั้งระบบ
Section 18: RAG Service Architecture — สร้าง Service สำหรับเชื่อมต่อ OpenAI และ Vector Store, การออกแบบ RAG Pipeline, Prompt Engineering สำหรับ RAG
Section 19: Context Management — เทคนิคการดึงเอกสารจาก Vector Database, การสร้าง Context Window ที่มีประสิทธิภาพ, การจัดการ Token Limit
Section 20: Chat API Endpoint — พัฒนา REST API สำหรับรับคำถามและส่งคืนคำตอบ, การทำ Streaming Response, Workshop: ทดสอบ Chat API
Section 21: Chat History & Memory — การจัดการบริบทการสนทนาต่อเนื่อง, Database Schema สำหรับ Chat History, การนำ History มาใช้ใน RAG
Section 22: Error Handling & Optimization — การจัดการข้อผิดพลาดในระบบ AI API, Rate Limiting และ Retry Logic, Workshop: ทดสอบความเสถียรของระบบ

Day 4: เชื่อมต่อ Frontend Next.js กับ Chat API และสร้าง Knowledge Base Management UI

Section 23: Chat Widget UI — การสร้าง Floating Chat Button, การสร้างหน้าต่างสนทนา (Chat Window), Styling ด้วย Tailwind CSS
Section 24: Frontend Integration — เชื่อมต่อ UI เข้ากับ Chat API, การจัดการสถานะ Loading และ Streaming, การแสดงผลแบบ Real-time (Typewriter Effect)
Section 25: Knowledge Base Management — Database Schema สำหรับ Knowledge Documents, API Routes (CRUD + File Upload), Knowledge Base UI (Sidebar + Document Detail), File Upload สำหรับ PDF, CSV, TXT, เชื่อมต่อกับ Ingestion Pipeline, Ingestion Library สำหรับใช้ใน API และ Script, Custom Modal Dialogs (Delete Confirmation + Index Success)
Section 26: Full Chat Page — สร้างหน้า Chat เต็มรูปแบบ, การจัดการ Chat Sessions, Workshop: ทดสอบระบบ Chat ทั้งหมด

Day 5: ระบบ Automation ด้วย n8n และการ Deployment ด้วย Podman

Section 27: LINE Webhook & Messaging API — ตั้งค่า LINE Messaging API Channel, สร้าง Webhook API สำหรับรับข้อความจาก LINE, เทคนิคการส่งข้อความตอบกลับจาก AI ไปยัง LINE
Section 28: LINE Bot Features — Keyword Triggers สำหรับ LINE Group, Rich Messages (Flex Message)
Section 29: Lead Database & LINE Group Alert — เพิ่ม Prisma Model สำหรับเก็บข้อมูล Lead ใน PostgreSQL, Auto-register Group ID เมื่อ Bot เข้ากลุ่ม (บันทึกลง DB อัตโนมัติ), สร้าง Lead Capture Form บนหน้า Landing Page, การส่งการแจ้งเตือนผ่าน LINE Messaging API (ส่งเข้ากลุ่ม), สร้างหน้าจัดการ Lead สำหรับ Admin/Manager, สร้างหน้า Admin จัดการกลุ่ม LINE (เปิด/ปิดแจ้งเตือน, เพิ่มกลุ่มด้วยมือ)
Section 30: n8n Lead Alert Automation — แนะนำ n8n Workflow Automation, Webhook สำหรับส่งข้อมูลไปยัง n8n
Section 31: Containerization ด้วย Podman — ภาพรวม Architecture ของแอปพลิเคชัน, ทำไมต้อง Podman? (vs Docker), การเขียน Dockerfile สำหรับ Next.js, Multi-Stage Build
Section 32: Production Deployment — Podman Compose สำหรับ Multi-Container, Environment Variables ในระบบ Production, การทดสอบแอปพลิเคชันใน Container
Section 33: Final Workshop & Best Practices — รวม Checklist สำหรับ Production, Security Best Practices, Performance Optimization, Workshop: Deploy ระบบทั้งหมด

Workshop Next.js 16: The AI-Native Developer Masterclass

Next.js 16 AI-Native Architecture
App Router • React Server Components • Server Actions • Streaming วางโครงสร้างโปรเจกต์แบบ Scalable ระดับ Production

Modern UI System with Tailwind + shadcn/ui
Design System ระดับ Startup / Landing Page • Auth Pages • Dashboard พร้อมใช้งานจริง

Enterprise Authentication with Better Auth
ระบบสมาชิกครบวงจร Session • Account • Verification • Secure Architecture
Email/Password Authentication — สมัครสมาชิก, เข้าสู่ระบบ ด้วย Better Auth

Enterprise Authentication with Better Auth
Email/Password Authentication — สมัครสมาชิก, เข้าสู่ระบบ ด้วย Better Auth

Enterprise Authentication with Better Auth
Sign in with Google

Enterprise Authentication with Better Auth
Sign in with Github

Enterprise Authentication with Better Auth
Sign in with LINE

Enterprise Authentication with Better Auth
Sign in with Facebook

Enterprise Authentication with Better Auth
รองรับทั้ง 5 ช่องทาง email / google / github / line / facebook

Enterprise Authentication with Better Auth
2FA (TOTP) - Google Authentication

Enterprise Authentication with Better Auth
Email Verification

Enterprise Authentication with Better Auth
Forgot Password / Reset Password

Role-Based Access Control (RBAC)
แบ่งสิทธิ์ Admin / Manager / User ด้วย Better Auth Admin Plugin

Develop RAG AI Chatbot API
Retrieval-Augmented Generation ด้วย OpenAI GPT-4o-mini + pgVector / แสดงคำตอบ AI แบบ real-time / เก็บประวัติการสนทนาใน Database / ดึงเอกสารที่เกี่ยวข้องจาก Vector DB

Develop RAG AI Chatbot API
Chat Widget — Floating Chat Button + Chat Window (popup)

Develop RAG AI Chatbot API
Full Chat Page — หน้า Chat เต็มรูปแบบพร้อม Session Sidebar

Knowledge Base

Document Management UI — CRUD เอกสารฐานความรู้ผ่าน Admin Panel
File Upload — รองรับ PDF, CSV, TXT พร้อม Drag & Drop
Ingestion Pipeline — แปลงเอกสาร → Text Chunks → Embeddings → pgVector โดยอัตโนมัติ

Document Management UI — CRUD เอกสารฐานความรู้ผ่าน Admin Panel