Fullstack Web Application ยุคใหม่ด้วย Next.js 16

คอร์สเดียวจบ! เรียนรู้การสร้าง Fullstack Web Application ยุคใหม่ด้วย Next.js 16 App Router, ElysiaJS (Bun), Prisma ORM, Tailwind CSS v4 และ PostgreSQL พร้อม เจาะลึกการ Deploy ขึ้น Production จริงบน Windows Server ด้วย PM2 เพื่อการดูแลระบบในระดับองค์กรอย่างมืออาชีพ

เรียนสดที่ศูนย์อบรม หรือสด Online :

ปกติ `7,900`บาท ลดเหลือเพียง 6,900 บาท ถึงสิ้นปีนี้เท่านั้น

เรียนรูปแบบ VDO Online :

ราคาเหลือเพียง 3,950 บาท ถึงสิ้นปีนี้เท่านั้น

คำอธิบายคอร์ส

คอร์สนี้คือเส้นทางการเรียนรู้แบบ Full-Stack Web Development ที่พาผู้เรียนตั้งแต่ระดับเริ่มต้น ไปจนถึงสามารถสร้างเว็บแอปพลิเคชันที่ใช้งานได้จริง ด้วยเทคโนโลยีที่เป็นที่นิยมและใช้งานจริงในอุตสาหกรรมปัจจุบัน ได้แก่ Next.js, Tailwind CSS, Elysia, Bun, PostgreSQL, Prisma และ TypeScript พร้อมปิดท้ายด้วยการ Deploy ระบบขึ้นสู่ Windows Server ด้วย PM2 แบบมืออาชีพ

จุดเด่นของคอร์สคือการออกแบบเนื้อหาแบบ “แยกหัวข้อเรียนรู้อิสระ” (Topic-Isolated Learning) ทำให้ผู้เรียนสามารถกลับมาทบทวนหรือศึกษาเฉพาะหัวข้อที่ต้องการได้ทันที โดยไม่ต้องไล่เรียงเนื้อหาทั้งหมดใหม่ ทุกบทเรียนมาพร้อมตัวอย่างโค้ดจริง คำอธิบายทีละขั้นตอน และ Workshop ปฏิบัติจริงที่จำลองจากธุรกิจใกล้ตัว คือ ระบบสั่งอาหารร้านชาบูบุฟเฟ่ต์ (Shabu Buffet Ordering System) ตั้งแต่หน้าบ้าน (Frontend) ไปจนถึงระบบหลังบ้านที่เชื่อมต่อฐานข้อมูลจริง

เหมาะกับงานประเภทไหน?

แทบจะบอกได้ว่าเหมาะสมกับทุกประเภท สามารถนำมาใช้งาน หรือพัฒนาได้ด้วยเฟรมเวิร์คนี้
ผู้เรียนที่ต้องการนำไปพัฒนางานประเภท E-Commerce และ App ภายในองค์กร เป็นต้น
ผู้เรียนที่ต้องการนำไปใช้ในที่ทำงาน หรือเป็น Freelancer อยู่แล้ว เพื่อพัฒนางานให้ลูกค้าได้รวดเร็วยิ่งขึ้น
ผู้เรียนที่ต้องการนำไปพัฒนางานสำหรับธุรกิจ บริษัท หรือกิจการตนเอง
ผู้เรียนที่ต้องการนำไปพัฒนางานทางด้านที่ต้องการความปลอดภัย
งานในระดับองค์กรก็สามารถนำไปพัฒนา หรือแม้แต่เขียนไหม่ทั้งหมดด้วยเฟรมเวิร์คนี้ก็ได้เช่นกัน
ผู้เรียนที่ต้องการเปลี่ยนงาน หรืออัพสกิลให้สูงยิ่งขึ้น เพื่อต้องการขยับเงินเดือนให้สูงขึ้น ก็แนะนำศึกษา Framework นี้ได้เลย

จุดเด่นของคอร์สนี้ (Course Highlights)

High-Performance Stack: เทคโนโลยี cutting-edge ที่เร็วและประหยัดทรัพยากร (Bun + ElysiaJS + Next.js 16)
Type-Safety ทั้งระบบ: เชื่อมต่อ Type ระหว่าง Frontend และ Backend แบบไร้รอยต่อ
Modern CSS: สัมผัสความฟินกับฟีเจอร์ใหม่และไฟล์ config แบบใหม่ใน Tailwind CSS v4
Enterprise Production Deployment: (Highlight!) สอนติดตั้งและปรับแต่ง Environment บน Windows Server จริง ใช้ PM2 จัดการ Process พร้อมตั้งค่าให้รันอัตโนมัติเมื่อ Server Restart

คอร์สนี้เหมาะสำหรับใคร? (Who Is This Course For?)

Web Developer & IT Professional ที่ต้องการพัฒนาแอปด้วย Tech Stack ยุคใหม่ และต้องนำไปใช้งานจริงบน Windows Server ของบริษัท/องค์กร
Frontend Developer ที่ใช้ Next.js เป็นประจำ และต้องการเขียน Backend API และ Deploy ระบบได้เองครบวงจร
Backend / System Administrator ที่ต้องการเรียนรู้โครงสร้าง Fullstack App ยุคใหม่พร้อมวิธีสร้าง Service และจัดการ Process บน Windows

ผู้เรียนต้องมีความรู้อะไรมาก่อน

สิ่งที่ควรมีพื้นฐาน (จำเป็น):

ความเข้าใจพื้นฐาน HTML, CSS และ JavaScript หรือ PHP (เช่น ตัวแปร, ฟังก์ชัน, เงื่อนไข, ลูป)
คุ้นเคยกับการใช้งานคอมพิวเตอร์ทั่วไป และการติดตั้งโปรแกรมพื้นฐาน
มีเครื่องคอมพิวเตอร์ที่รองรับการติดตั้ง Node.js/Bun และ PostgreSQL (Windows หรือ macOS)

สิ่งที่ไม่จำเป็นต้องมีมาก่อน

คอร์สจะสอนตั้งแต่พื้นฐานระดับกลาง (ที่สูงกว่าระดับเริ่มต้น):

ไม่จำเป็นต้องมีประสบการณ์กับ Next.js, React, TypeScript มาก่อน
ไม่จำเป็นต้องรู้จัก Database หรือภาษา SQL มาก่อน
ไม่จำเป็นต้องเคย Deploy เว็บไซต์ขึ้น Server มาก่อน

บทเรียนเพื่อการเรียนรู้

หลักสูตรสอนพัฒนา สอนเขียน สอนสร้างเว็บไซต์ Full Stack ด้วย Next.js 16

บทนำ และการติดตั้งโปรเจค

แนะนำคอร์สออนไลน์
เริ่มติดตั้งเครื่องมือที่จำเป็น
เริ่มติดตั้งโปรเจค Next.JS16

ส่วนที่ 1 Frontend – NextJS 16 + Tailwind CSS 4

บทที่ 1 ทำความรู้จัก JSX คืออะไร
บทที่ 2 เรียนรู้การแยก และประกอบชิ้นส่วน Component
บทที่ 3 เรียนรู้การรับและส่งข้อมูล Props
บทที่ 4 เรียนรู้ useState ตัวแปรที่จำค่าได้ และสามารถเปลี่ยนค่าได้
บทที่ 5 ทำความรู้จักกับ useEffect
บทเพิ่มเติม เรียนรู้เรื่อง Type ที่ควรรู้จัก
บทที่ 6 เรียนรู้การใช้งาน Tailwind CSS v4
บทที่ 7 เรยนรู้วิธีใช้งาน Routing & Layout
บทที่ 8 เรียนรู้วิธีการกำหนดรูปภาพด้วย Next Image
บทที่ 9 เรียนรู้การสร้าง Form & Validation ข้อมูล (ตอนที่ 1)
บทที่ 9.1 เรียนรู้การสร้าง Form & Validation ข้อมูล (ตอนที่ 2)
บทที่ 10 ทำความรู้ัจัก และใช้งาน LocalStorage
บทที่ 11 เรียนรู้การใช้งาน SweetAlert 2

Workshop 1 (สร้าง Frontend ร้านชาบู)

ตอนที่ 1 อธิบายโครงสร้าง และสร้าง Data menu
ตอนที่ 2 สร้างหน้าให้กรอกเลขที่โต๊ะ
ตอนที่ 3 ตกแต่งหน้ากรอกเลขที่โต๊ะด้วย Tailwind CSS 4
ตอนที่ 4 สร้างหน้าแสดงหมวดสินค้า และแสดงด้วยการใช้ Loop และการ active menu
ตอนที่ 5 วิธีแสดงสินค้าด้วยการใช้ Loop พร้อมกับการเขียนฟังก์ชั่นเพิ่มสินค้าลงตระกร้า
ตอนที่ 6 เรียนรู้วิธี Build Project

ส่วนที่ 2 Backend – Elysia + PostgreSQL + Prisma

บทที่ 12 เรียนรู้การสร้าง Elysia และกำหนดความปลอดภัยเบื้องต้นด้วย Cors
บทที่่ 12.1 ทำความรู้จักกับประเภทของ Route GET
บทที่่ 12.2 ทำความรู้จักกับประเภทของ Route Post
บทที่ 13 เรียนรู้วิธีสร้างฐานข้อมูล PostgreSQL และการใช้งาน Prisma
บทที่ 13.1 เรียนรู้และฝึกใช้คำสั่ง Prisma create พื้นฐาน
บทที่ 13.2 เรียนรู้และฝึกใช้คำสั่ง Prisma read พื้นฐาน
บทที่ 13.3 เรียนรู้และฝึกใช้คำสั่ง Prisma update และ delete พื้นฐาน
บทที่ 14 เรียนรู้และฝึกใช้งาน CRUD จริงเต็มรูปแบบ พร้อมกับสร้าง Route GET ใช้งานจริง
บทที่ 14.1 เรียนรู้และฝึกใช้งาน CRUD จริงเต็มรูปแบบ พร้อมกับสร้าง Route create ใช้งานจริง
บทที่ 14.2 เรียนรู้และฝึกใช้งาน CRUD จริงเต็มรูปแบบ พร้อมกับสร้าง Route เรียกดูสินค้าบางรายการ
บทที่ 14.3 เรียนรู้และฝึกใช้งาน CRUD จริงเต็มรูปแบบ พร้อมกับสร้าง Route put ใช้งานจริง
บทที่ 14.4 เรียนรู้และฝึกใช้งาน CRUD จริงเต็มรูปแบบ พร้อมกับสร้าง Route delete ใช้งานจริง
บทที่ 14.5 เรียนรู้และฝึกใช้งาน CRUD จริงเต็มรูปแบบ พร้อมกับสร้าง Route get ใช้ในฟังก์ชั่นค้นหา
บทที่ 15 เรียนรู้วิธีการเขียนฟังก์ชั่น File Upload และ Validate File
บทที่ 15.1 เรียนรู้วิธีการเขียน Route สำหรับงาน File Upload
บทที่ 16 เรียนรู้วิธีการเขียนฟังก์ชั่น Export Excel File
บทที่ 16.1 เรียนรู้วิธีการกำหนด Header สำหรับงาน Export Excel File
บทที่ 17 เรียนรู้การติดตั้ง และใช้งาน JWT Authentication
บทที่ 17.1 เรียนรู้การเขียน Route Register และใช้งาน JWT Authentication
บทที่ 17.2 เรียนรู้การเขียน Route Login และสร้าง Token
บทที่ 17.3 เรียนรู้การเขียน Route ตรวจสอบ Token สำหรับดูข้อมูลของผู้ใช้งานเอง
บทเรียนเสริม เรียนรู้การป้องกันการโจมติแบบสุ่มเดารหัสผ่านซ้ำๆ ที่เรียนกันว่า Brute-force

Workshop 2 (สร้าง Backend ร้านชาบู)

ตอนที่ 1 เริ่มต้นสร้าง Model และเรียนรู้การทำ Relation Table
ตอนที่ 2 เรียนรู้วิธีนำข้อมูลจากไฟล์ บันทึกลงฐานข้อมูลด้วยวิธีการ Seed
ตอนที่ 3 เรียนรู้วิธีการสร้าง Route แสดงเมนูอาหารทั้งหมด
ตอนที่ 4 เรียนรู้วิธีการสร้าง Route สำหรับพนักงานเคาน์เตอร์เปิดบิล
ตอนที่ 5 เรียนรู้วิธีการสร้าง Route สำหรับดูโต๊ะที่เปิดบิลอยู่ทั้งหมด
ตอนที่ 6 เรียนรู้วิธีการสร้าง Route สำหรับลูกค้าดูบิล เมื่อสแกน QR Code
ตอนที่ 7 เรียนรู้วิธีการสร้าง Route รองรับการสแกนและกดสั่งอาหาร
ตอนที่ 8 เรียนรู้วิธีการสร้าง Route สำหรับให้ลูกค้าดูรายการทั้งหมดที่สั่งของบิลตนเอง
ตอนที่ 9 เรียนรู้วิธีการสร้าง Route สำหรับปิดบิล และรับชำระเงิน

Workshop 2 (แก้ไข Front-end ให้เรียก API จริง)