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

Basic Next.js for Beginners

หลักสูตร Basic Next.js for Beginners เป็นการอบรมสร้างเว็บแอปด้วย Next.js 16 แบบ App Router ทั้ง Server และ Client Component, UI ด้วย Tailwind CSS กับ shadcn/ui และ Server Actions กับ Prisma ORM เหมาะกับนักพัฒนาที่เขียน React ได้แล้วและนักศึกษา จบแล้วสร้างระบบจัดการสินค้าที่มี Login และ CRUD ได้

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

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

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

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

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

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

Next.js เป็น React Framework ที่นิยมใช้สร้างเว็บแอปพลิเคชันแบบ Full-stack ในปัจจุบัน Next.js 16 ใช้ App Router เป็นแนวทางหลัก มี Server Component ที่ดึงข้อมูลบนเซิร์ฟเวอร์ได้โดยตรง Server Actions ที่รับข้อมูลจากฟอร์มโดยไม่ต้องเขียน API แยก และใช้ Turbopack เป็นค่าเริ่มต้นทั้งตอนพัฒนาและตอน Build ทำให้นักพัฒนาที่เขียน React ได้แล้วต่อยอดไปสร้างเว็บที่เร็ว ปลอดภัย และรองรับ SEO ได้ในโปรเจกต์เดียว

หลักสูตรนี้พาผู้เรียนตั้งแต่สร้างโปรเจกต์ด้วย create-next-app จัดหน้าและ Layout ด้วย App Router แยกงานระหว่าง Server Component กับ Client Component ตกแต่ง UI ด้วย Tailwind CSS 4 และ shadcn/ui ต่อฐานข้อมูลด้วย Prisma ORM ทำ CRUD ด้วย Server Actions พร้อม Validation และทำระบบ Login อย่างง่าย ผ่าน Workshop ระบบจัดการสินค้าที่ต่อเติมตลอดหลักสูตรจนพร้อม Deploy (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Beginner)

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

เข้าใจโครงสร้างโปรเจกต์ Next.js 16 แบบ App Router และการทำงานของ Server Component กับ Client Component
สร้าง Routing, Layout, หน้า Loading และหน้า Error ด้วยระบบไฟล์ของ App Router ได้
สร้าง UI ที่รองรับทุกขนาดจอด้วย Tailwind CSS 4 และ shadcn/ui ได้
ใช้ Server Actions รับข้อมูลจากฟอร์มและทำ CRUD กับฐานข้อมูลผ่าน Prisma ORM ได้
ตรวจข้อมูลด้วย Zod และแสดงข้อผิดพลาดให้ผู้ใช้เข้าใจได้
ทำระบบ Login และป้องกันหน้าที่ต้องเข้าสู่ระบบ แล้ว Deploy เว็บขึ้นใช้งานจริงได้

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

Frontend Developer ที่เขียน React ได้แล้วและต้องการเริ่มใช้ Next.js รุ่นปัจจุบัน
Programmer หรือ Software Engineer ที่ต้องการเปลี่ยนมาทำเว็บด้วย Modern Stack
นักศึกษาที่ต้องการทำโปรเจกต์จบหรือเตรียมตัวทำงานสายเว็บ
Freelance และผู้ก่อตั้ง Startup ที่ต้องการสร้างเว็บแอปที่เร็วและรองรับ SEO ด้วยตัวเอง

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

เข้าใจ HTML และ CSS และการจัด Layout พื้นฐาน
เขียน JavaScript สมัยใหม่ (ES6+) ได้ เช่น Arrow Function, Destructuring และ async/await
เข้าใจพื้นฐาน React เช่น Component, Props และ useState
มีพื้นฐานการทำงานของเว็บแอปพลิเคชันมาบ้าง

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

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

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร Basic Next.js สำหรับผู้เริ่มต้น อัปเดตเป็น Next.js 16 แบบ App Router อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab ผ่าน Workshop ระบบจัดการสินค้าที่ต่อเติมตลอดหลักสูตร ระดับ Beginner ผู้เรียนจะได้สร้าง Routing และ Layout แยกใช้ Server Component กับ Client Component ตกแต่ง UI ด้วย Tailwind CSS 4 และ shadcn/ui ต่อฐานข้อมูลด้วย Prisma ORM ทำ CRUD ด้วย Server Actions ตรวจข้อมูลด้วย Zod ทำระบบ Login ด้วย Session Cookie และ proxy.ts แล้ว Deploy ขึ้น Vercel พร้อมรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ

Day 1 Next.js 16, Routing และ UI

Section 1: Lab: เริ่มต้น Next.js 16

Next.js ต่างจาก React ที่ใช้ Vite อย่างไร และเหมาะกับงานแบบไหน
สร้างโปรเจกต์ด้วย create-next-app และค่าเริ่มต้น TypeScript, Tailwind CSS, ESLint และ App Router
โครงสร้างโฟลเดอร์ app, public และไฟล์ next.config.ts
รัน next dev ด้วย Turbopack และอ่าน Error Overlay
Lab: หน้าแรกของระบบจัดการสินค้า

Section 2: Lab: Routing และ Layout ด้วย App Router

สร้างหน้าด้วยโฟลเดอร์และไฟล์ page.tsx รวมถึง Nested Route
Dynamic Route เช่น app/products/[id] และการอ่าน params
layout.tsx สำหรับ Header และ Sidebar ที่ใช้ร่วมกัน
ไฟล์พิเศษ loading.tsx, error.tsx และ not-found.tsx
Lab: หน้ารายการสินค้าและหน้ารายละเอียดสินค้า

Section 3: Server Component กับ Client Component

ทุก Component เป็น Server Component โดยปริยาย และดึงข้อมูลด้วย async/await ได้ตรง ๆ
ใช้ 'use client' เมื่อต้องการ State, Event หรือ Hook
ส่ง Props จาก Server ไป Client และแยกส่วนโต้ตอบให้เล็กที่สุด
Link, useRouter และ redirect สำหรับการนำทาง
Lab: ช่องค้นหาและตัวกรองสินค้าฝั่ง Client

Section 4: Lab: UI ด้วย Tailwind CSS 4 และ shadcn/ui

แนวคิด Utility-First และการตั้งค่า Theme ใน Tailwind CSS 4
Responsive แบบ Mobile-first และ Dark Mode
ติดตั้ง shadcn/ui และเพิ่ม Button, Card, Table, Dialog และ Input
ปรับแต่ง Component ที่คัดลอกมาไว้ในโปรเจกต์ของเราเอง
Lab: Layout หน้า Dashboard พร้อม Sidebar และตารางสินค้า

Section 5: Metadata, รูปภาพ และฟอนต์

Metadata API และ generateMetadata สำหรับ SEO รายหน้า
next/image ปรับขนาดและโหลดรูปภาพอย่างเหมาะสม
next/font โหลดฟอนต์ภาษาไทยและอังกฤษโดยไม่กระตุก
ภาพรวมหน้า Static กับหน้า Dynamic และผลต่อความเร็ว
Lab: ใส่ชื่อหน้า คำอธิบาย และรูปสินค้าให้ครบ

Day 2 ข้อมูล ฟอร์ม Login และ Deploy

Section 6: Lab: ฐานข้อมูลด้วย Prisma ORM

ติดตั้ง Prisma ORM 7 กับ SQLite และไฟล์ prisma.config.ts
ออกแบบ Model สินค้าและหมวดหมู่ใน schema.prisma
สร้างตารางด้วย prisma migrate และใส่ข้อมูลตัวอย่างด้วย Seed
Query ข้อมูลใน Server Component และดูข้อมูลด้วย Prisma Studio
Lab: แสดงสินค้าจากฐานข้อมูลจริง

Section 7: Lab: Server Actions และ CRUD

ประกาศ Server Action ด้วย 'use server' และส่งฟอร์มผ่าน action
เพิ่ม แก้ไข และลบสินค้าโดยไม่ต้องเขียน API Route
revalidatePath และ redirect หลังบันทึกข้อมูล
useActionState และสถานะ pending ระหว่างส่งฟอร์ม
Lab: ฟอร์มเพิ่มและแก้ไขสินค้าพร้อมปุ่มลบแบบยืนยัน

Section 8: Validation และการจัดการข้อผิดพลาด

เขียน Schema ด้วย Zod และตรวจข้อมูลฝั่ง Server ทุกครั้ง
ส่งข้อผิดพลาดรายช่องกลับไปแสดงใต้ช่องกรอก
แจ้งผลด้วย Toast แบบ Sonner และ Dialog ใน shadcn/ui
จัดการ Error ที่ไม่คาดคิดด้วย error.tsx
Lab: ฟอร์มสินค้าที่ตรวจข้อมูลครบและแจ้งผลชัดเจน

Section 9: Lab: ระบบ Login อย่างง่าย

ฟอร์มสมัครสมาชิกและเข้าสู่ระบบด้วย Server Actions
เก็บรหัสผ่านแบบ Hash ด้วย bcrypt
สร้าง Session Cookie ที่เข้ารหัสด้วย jose และอ่านด้วย cookies()
ป้องกันหน้าด้วย proxy.ts และตรวจสิทธิ์ซ้ำใน Data Access Layer
Lab: หน้าจัดการสินค้าที่ต้อง Login และปุ่ม Logout

Section 10: Workshop: ระบบจัดการสินค้าและ Deploy

ค้นหาและแบ่งหน้าด้วย searchParams
Environment Variables และไฟล์ .env สำหรับค่าลับ
ตรวจโปรเจกต์ด้วย next build ก่อนขึ้นระบบ
Deploy ขึ้น Vercel จาก GitHub หรือรันบนเซิร์ฟเวอร์ Node.js
นำเสนอผลงานและแนวทางเรียนต่อ

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

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

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

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

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

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

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

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

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

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

Server Component กับ Client Component ใน Next.js ต่างกันอย่างไร

ใน App Router ทุก Component เป็น Server Component โดยปริยาย คือเรนเดอร์บนเซิร์ฟเวอร์ ดึงข้อมูลด้วย async/await ได้ตรง ๆ และไม่ส่ง JavaScript ของตัวเองไปที่เบราว์เซอร์ ส่วน Client Component ต้องขึ้นต้นไฟล์ด้วย 'use client' ใช้เมื่อต้องการ State, Event อย่าง onClick หรือ Hook อย่าง useState และ useEffect หลักที่ใช้กันคือให้เป็น Server Component ไว้ก่อน แล้วแยกเฉพาะส่วนที่โต้ตอบกับผู้ใช้เป็น Client Component

สร้างหน้าและ Layout ใน Next.js App Router ทำอย่างไร

สร้างโฟลเดอร์ใน app ตามเส้นทางที่ต้องการ แล้ววางไฟล์ page.tsx ไว้ข้างใน เช่น app/products/page.tsx คือหน้า /products ส่วนเส้นทางแบบ Dynamic ใช้ชื่อโฟลเดอร์ในวงเล็บเหลี่ยมอย่าง app/products/[id] ไฟล์ layout.tsx ใช้วางส่วนที่แชร์กันอย่าง Header และ Sidebar ให้ทุกหน้าในโฟลเดอร์นั้น และยังมีไฟล์พิเศษ loading.tsx, error.tsx และ not-found.tsx สำหรับสถานะกำลังโหลด ข้อผิดพลาด และหน้าที่ไม่พบ

Server Actions ใน Next.js คืออะไร ใช้ส่งฟอร์มอย่างไร

Server Action คือฟังก์ชัน async ที่ทำงานบนเซิร์ฟเวอร์ ประกาศด้วย 'use server' แล้วส่งให้ฟอร์มผ่าน action ได้ทันทีโดยไม่ต้องเขียน API Route แยก ฟังก์ชันจะได้รับ FormData จากฟอร์ม ควรตรวจข้อมูลด้วย Zod และตรวจสิทธิ์ผู้ใช้ทุกครั้งก่อนบันทึก จากนั้นเรียก revalidatePath ให้หน้าแสดงข้อมูลใหม่หรือ redirect ไปหน้าอื่น ฝั่งฟอร์มใช้ useActionState รับข้อความผิดพลาดและสถานะ pending ระหว่างส่ง

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

เหมาะกับ Frontend Developer ที่เขียน React ได้แล้ว Programmer ที่ต้องการเปลี่ยนมาทำเว็บด้วย Modern Stack นักศึกษาที่ทำโปรเจกต์จบ และ Freelance หรือผู้ก่อตั้ง Startup ที่อยากสร้างเว็บแอปเอง ควรเข้าใจ HTML และ CSS เขียน JavaScript ES6+ ได้ และรู้พื้นฐาน React เช่น Component, Props และ useState มาก่อน

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

สร้างโปรเจกต์ Next.js 16 แบบ App Router แยกใช้ Server Component และ Client Component ได้ถูกต้อง สร้าง Routing และ Layout ทำ UI ด้วย Tailwind CSS 4 และ shadcn/ui ต่อฐานข้อมูลด้วย Prisma ORM ทำ CRUD ด้วย Server Actions พร้อม Validation ด้วย Zod สร้างระบบ Login และป้องกันหน้าด้วย proxy.ts แล้ว Deploy ขึ้น Vercel ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

หลักสูตร Basic Next.js for Beginners ใช้เครื่องมืออะไรบ้าง

หลักสูตรนี้ใช้ Next.js 16 แบบ App Router บน Node.js 24 LTS สร้างโปรเจกต์ด้วย create-next-app พร้อม TypeScript, Tailwind CSS 4 และ ESLint ใช้ shadcn/ui ที่ติดตั้งผ่าน CLI สำหรับคอมโพเนนต์ ใช้ Prisma ORM 7 กับ SQLite เป็นฐานข้อมูล ใช้ Zod ตรวจข้อมูล ใช้ bcrypt และ jose ทำระบบ Login และนำโปรเจกต์ขึ้น Vercel ด้วยบัญชีแบบฟรีของผู้เรียนเอง เครื่องมือทั้งหมดใช้ได้ฟรี