คอร์สการใช้ Next.js เพื่อพัฒนาเว็บและ API ด้วย TypeScript, React, Next.js, Routes, Zustand, Tailwind CSS และ React Query

รายละเอียดคอร์ส

Next.js หนึ่งในเครื่องมือพัฒนา Fullstack ที่สามารถพัฒนาได้ทั้งเว็บและ API ในชุดเครื่องมือเดียวกัน นั่นจึงทำให้ง่ายต่อการพัฒนาแอปเพียงแค่รู้ภาษา JavaScript / TypeScript ก็สามารถสร้าง Fullstack Web ได้อย่างรวดเร็ว

คอร์สเรียนนี้ผู้เรียนจะได้ทราบถึงการใช้งาน React ควบคู่กับ Next.js 14 เพื่อพัฒนาเว็บและ API บนภาษา TypeScript พร้อมด้วยการตกแต่งหน้าเว็บผ่าน Tailwind CSS และ Shadcn UI โดยใช้ Zustand เป็นเครื่องมือจัดการ state บนเว็บ พร้อมกับการใช้ React Query (Tanstack Query) เป็นเครื่องมือแคชข้อมูลจาก API บนเว็บเบราว์เซอร์ สุดท้ายจึงอาศัย Docker เป็นเครื่องมือสำหรับการตั้งค่าและการ deploy โค้ดสู่ production ทั้งหมดนี้เรียนรู้ผ่านการปฏิบัติจริงด้วยเวิร์คชอประบบจัดการวันลาออนไลน์

ส่วนแรกจะเป็นการทบทวนการใช้งาน JavaScript และ TypeSciript สำหรับ Front-End และ Back-End ยุคใหม่ รวมถึงเทรนด์และเทคนิคต่าง ๆ ของการพัฒนาเว็บและ API ในยุค 2023 - 2024 พร้อมทั้งปูพื้นฐานการใช้ React และ Next.js อย่างง่าย เพื่อให้เห็นภาพรวมคร่าว ๆ ของการใช้งานเป็นเบื้องต้น

ส่วนถัดมาคือการพูดถึงการใช้งาน React ทั้งหลักการของ Component-Based Design หลักการวางโครงสร้างโปรเจคเพื่อให้ง่ายต่อการใช้งานและบำรุงรักษา รวมไปถึงหลักการอื่นที่จำเป็น เช่น React Hooks เป็นต้น จากนั้นจึงเข้าสู่บนเรียนของการใช้ Next.js เพื่อพัฒนาเว็บ โดยเริ่มต้นจากการใช้งานโครงสร้างแบบ App Router ทั้งส่วนของ page layout error loading การจัดการ Routes ทั้งแบบ static และ dynamic การเปลี่ยนผ่านหน้าเพจด้วย Link และ Hooks ต่าง ๆ ในแพคเกจ next/navigation รวมไปถึงการแจกแจงความแตกต่างของ React Server Copmponent (RSC) และ Client Component รวมถึงการพิจารณาใช้ user client และ use server เป็นต้น

Next.js นั้นจำแนกประเภทการแสดงผลได้หลายรูปแบบ โดยแต่ละรูปแบบมีความเหมาะสมกับงานเว็บที่แตกต่างกัน หัวข้อนี้ผู้เรียนจะได้เข้าถึงหลักการเลือกรูปแบบที่เหมาะสมในการแสดงผลเพื่อให้ได้ประสิทธิภาพสูงสุด ได้แก่ Client-Side Rendering (CSR) Server-Side Rendering (SSR) Static-Site Generation (SSG) Incremental Static Regeneration (ISR) รวมถึงความเข้าใจในระบบแคชของ Next.js และ การใช้การตั้งค่าบน Route ผ่าน Route Segment Config เช่นตัวแปร revalidate และ dynamic เป็นต้น สุดท้ายจึงกล่าวถึงการใช้งาน Server Action และ revalidatePath เพื่อเปลี่ยนแปลงค่าแคชบนเซิฟเวอร์

เพื่อให้หน้าเว็บของเรามีการแสดงผลที่สวยงาม CSS จึงเป็นแกนหลักที่สำคัญของส่วนประกอบนี้ คอร์สนี้เราจะแนะนำการใช้งาน Tailwind CSS ไลบรารี่แบบ Utility Classes ยอดนิยมพร้อมด้วยการใช้งาน Shadcn UI ที่ทำให้การสร้าง UI บนหน้าเว็บเป็นเรื่องง่ายขึ้นด้วยการใช้งานคอมโพแนนท์สำเร็จรูปที่ไลบรารี่จัดเตรียมไว้ให้แล้ว

ส่วนของการพัฒนา API นั้นเราใช้ API Routes บนระบบของ Next.js เอง ผู้เรียนจะได้ทราบถึงการดักจับ request ที่เกิดขึ้นบน HTTP Methods ต่าง ๆ เชน GET, POST, PATCH, DELETE รวมถึงการเข้าถึงส่วนของพารามิเตอร์ต่าง ๆ การรับไฟล์และข้อมูลผ่าน Form Data การตรวจสอบความถูกต้องของข้อมูลด้วย Zod การจัดการข้อผิดพลาดของ API และการส่งกลับ response ในรูปแบบ JSON เป็นต้น

เว็บแอปพลิเคชันโดยทั่วไปแล้วต้องมีการจัดเก็บข้อมูลลงฐานข้อมูล บทเรียนของเราจะสอนการใช้ Prisma ORM เพื่อเป็นตัวช่วยในการติดต่อและจัดการกับฐานข้อมูล พร้อมด้วยการพูดถึงหลักการต่าง ๆ ที่สำคัญเช่น การออกแบบ Database Schema กระบวนการของ Database Migration การเตรียมข้อมูลสำหรับทดสอบด้วยผ่าน Seed Data การสร้างความสัมพันธ์ระหว่างตารางด้วย Database Relations และการดำเนินการ CRUD บนข้อมูล เป็นต้น

เมื่อข้อมูลของเรามีความพร้อมในการใช้งานแล้ว เราจึงเรียนรู้การร้องขอข้อมูลบนเว็บผ่าน API ที่พัฒนาขึ้นมาจากนั้นจึงแคชข้อมูล และ revalidate ข้อมูลอย่างเหมาะสมผ่าน React Query (Tanstack Query) สำหรับการทำงานแบบ SSR, SSG และ ISR ผู้เรียนจะได้ทราบถึงการเชื่อมต่อฐานข้อมูลโดยตรงและแสดงผลข้อมูลตั้งแต่ที่เซิฟเวอร์ผ่าน React Server Component (RSC) ก่อนดำเนินการจัดส่งข้อมูลกลับสู่เว็บเบราว์เซอร์

เพื่อให้ข้อมูลใหม่ถูกเพิ่มเข้าระบบได้ การรับส่งข้อมูลผ่านฟอร์มจึงเป็นเรื่องสำคัญ ในบทเรียนนี้ผู้เรียนจะได้ทราบถึงการใช้งาน React Hook Form เพื่อจัดการฟอร์มและดึงข้อมูลออกจากฟอร์มก่อนจัดส่งไปยังเซิฟเวอร์ รวมถึงการตรวจสอบความถูกต้องของข้อมูลในฟอร์มผ่านการใช้ Zod และการอัพโหลดไฟล์เช่นรูปภาพผ่านฟอร์ม เป็นต้น

เว็บแอปพลิเคชันไม่ได้มีการแสดงผลเพียงหน้าเพจเดียว หากแต่มีหลายเพจหลายคอมโพแนนท์มาประกอบรวมกัน เมื่อมีข้อมูลหนึ่งเกิดขึ้น แต่ต้องการให้ข้อมูลนี้ไปปรากฎหรือใช้งานที่คอมโพแนนท์หรือเพจอื่น เราต้องหาวิธีในการจัดการ จัดเก็บ และส่งต่อข้อมูลนี้ไปยังส่วนประกอบอื่น หน้าที่ในการจัดการสถานะของข้อมูลนี้เป็นหน้าที่ของสิ่งที่เรียกว่า Client State Management สำหรับคอร์สนี้ผู้เรียนจะได้ทราบถึง การใช้งาน Zustand เพื่อเป็น State Management ของเว็บแอปพลิเคชัน

ความปลอดภัยขั้นพื้นฐานอย่างหนึ่งของเว็บคือการตรวจสอบสิทธิ์การเข้าถึงของผู้ใช้งาน คอร์สนี้จึงกล่าวถึงการสร้างกระบวนการยืนยันตัวตนของผู้ใช้่งาน (Authentication) การกำหนดสิทธิ์ (Role) ให้กับผู้ใช้งาน และการตรวจสอบสิทธิ์ของผู้ใช้งาน (Authorization) ทั้งแบบ Role-Based Access Control (RBAC) และ Attributed-Based Access Control (ABAC) ผ่านการใช้งานไลบรารี่คือ Auth.js (NextAuth.js)

สิ่งหนึ่งที่ขาดไม่ได้สำหรับงานเว็บคือการเพิ่มประสิทธิภาพให้กับเว็บแอปพลิเคชัน ไม่ว่าจะเป็นเรื่องของการทำ SEO การปรับปรุงประสิทธิภาพในการโหลดรูปภาพและฟอนต์ การพิจารณาและปรับปรุงประสิทธิภาพของ React เป็นต้น นี่คือสิ่งที่ผู้เรียนจะได้เรียนรู้ในคอร์สนี้เช่นกัน

สุดท้ายเมื่อกระบวนการพัฒนาเสร็จสิ้น ผู้เรียนจะได้ทราบถึงการใช้งาน Docker และ Docker Compose เพื่อเตรียมความพร้อม และนำส่งแอปพิลเคชันของเราสู่ Production

เนื้อหาบทเรียน

คอร์สนี้เป็นหลักสูตรอบรม 5 วัน ประกอบด้วยเนื้อหาตามวันดังต่อไปนี้

ตัวอย่าง Workshop

คอร์สของเรานอกจากจะสอนทฤษฎีและตัวอย่างการใช้งานทั่วไปแล้ว ยังมี Workshop เป็นระบบจัดการวันลาออนไลน์ ที่มีทั้งส่วนแสดงผลสำหรับผู้ใช้งานทั่วไปและส่วนจัดการสำหรับ Admin

โดยระบบนี้ผู้เรียนจะได้ทราบถึงการออกแบบและใช้คลาสต่าง ๆ ของ Tailwind CSS ที่สนับสนุนการทำงานแบบ Responsive สามารถเปิดเว็บเพื่อชมได้จากทั้งเดสก์ทอปหรือมือถือ โดยหน้าจอไม่เสียเลย์เอาต์

ระบบ Authentication เช่น การสมัครสมาชิก การเข้าสู่ระบบ และการออกจากระบบ ถูกรวมเข้าเป็นส่วนหนึ่งของ Workshop นี้เช่นกัน

โดยระบบจัดการวันลาออนไลน์นี้จะมีส่วนสำหรับ Admin เพื่อเข้าจัดการวันลาตามสิทธิ์ที่ตนมี ผู้เรียนจะได้เรียนรู้การทำ Authorization เพื่อจัดการสิทธิ์และตรวจสอบสิทธิ์สำหรับการเข้าถึง API และหน้าเพจต่าง ๆ ได้อย่างถูกต้อง

การทำงานกับฟอร์มก็เป็นส่วนสำคัญ Workshop นี้ได้แสดงถึงการสร้างฟอร์ม การอัพโหลดไฟล์พร้อมแสดงผลตัวอย่างรูปภาพที่อัพโหลด การตรวจสอบข้อมูลในฟอร์ม และการส่งข้อมูลในฟอร์มทั้งแบบ JSON และ Form Data

นอกเหนือจากนี้ Workshop ดังกล่าวยังรวมกับจัดการ Global State ในแอพพลิเคชันผ่าน Zustand การปรับปรุงประสิทธิภาพของแอพพลิเคชันด้วยเทคนิคต่าง ๆ รวมถึงการทำ SEO และการ Deploy แอพพลิเคชันด้วย Docker

ขอใบเสนอราคา

หากต้องการขอใบเสนอราคา ใบแจ้งหนี้ หนังสือชี้ชวนการเข้าอบรม และเอกสารอื่น ๆ รบกวนคุณลูกค้าติดต่อ เพจ Babel Coder หรือทางอีเมล์ babelcoder@gmail.com ได้ครับ

จุดประสงค์การเรียนรู้

• ผู้เรียนเข้าใจการออกแบบเว็บด้วยหลักการ Component-Based Design
• ผู้เรียนเข้าใจการสร้างและใช้งาน Component ด้วย React และ TypeScript บน Next.js ได้
• ผู้เรียนสามารถสร้างและใช้งานเว็บแอพพลิเคชันด้วย React บน Next.js ได้อย่างมีประสิทธิภาพ
• ผู้เรียนสามารถสร้าง Back-End บน Next.js ผ่าน API Routes ได้
• ผู้เรียนเข้าใจหลักการของการทำ Authentication และ Authorization บน Next.js และ Auth.js
• ผู้เรียนเข้าใจหลักการของ Client-Side Management ด้วย Zustand
• ผู้เรียนเข้าใจกระบวนการ Build และ Deploy แอพพลิเคชันที่พัฒนาด้วย Docker ได้

คอร์สนี้เหมาะกับใคร

• ผู้เรียนที่ต้องการศึกษาวิธีสร้างโปรเจคได้ไวด้วยโค้ดชุดเดียวแต่ได้ทั้ง Front-End และ Back-End
• ผู้เรียนที่มีพื้นฐาน HTML CSS และ JavaScript อยู่แล้ว โดยในคอร์สจะมีการทบทวน JavaScript และ TypeScript สมัยใหม่ที่จำเป็นต่อการใช้งาน Next.js
• ผู้เรียนที่ไม่เคยเขียน React / Next.js มาก่อน และต้องการสร้างเว็บด้วย React / Next.js
• ผู้เรียนที่เคยเขียน React / Next.js อยู่ก่อนแล้ว แต่ต้องการอัพเดทความรู้ React / Next.js สมัยใหม่
• ผู้เรียนที่ต้องการอัพเดทเทรนด์การใช้ React ให้เป็นปัจจุบันตามปี 2023 - 2024
• ผู้เรียนที่ต้องการเรียนรู้ไลบรารี่สมัยใหม่ในการใช้งานกับ React เช่น Next.js, React Hook Form, Zod, Tailwind CSS, Shadcn UI และ Zustand
• ผู้เรียนที่ต้องการศึกษาการใช้ Next.js เพื่อสร้างทั้ง Front-End และ Back-End
• ผู้เรียนที่ต้องการเรียนรู้การใช้งาน Next.js API Routes
• ผู้เรียนที่ต้องการศึกษาการทำงานทั้งระบบตั้งแต่ Front-End, Back-End การทำงานของ Authentication และ Authorization โดยใช้โค้ดชุดเดียวกัน

ผู้สอน

Nuttavut Thongjor

นักพัฒนาซอฟต์แวร์ประสบการณ์กว่า 10 ปี ผู้ก่อตั้ง Babel Coder วิทยากรอบรมการพัฒนาซอฟต์แวร์และผู้ให้คำปรึกษาในบริษัทชั้นนำ

คำถามพบบ่อย

คำถาม: จำเป็นต้องมีพื้นฐานอะไรบ้าง
คำตอบ: ผู้เรียนจำเป็นต้องมีพื้นฐาน HTML CSS และ JavaScript อยู่แล้ว

คำถาม: ระยะเวลาศึกษาของหลักสูตรนี้
คำตอบ: หลักสูตรนี้เป็นหลักสูตร 5 วัน เวลาสอนต่อวันคือ 6 ชั่วโมง (ตลอดหลักสูตรรวม 30 ชั่วโมง) เวลา 10.00 - 17.00 น.

คำถาม: รูปแบบการอบรมเป็นอย่างไร
คำตอบ: หลักสูตรนี้จำหน่ายสองรูปแบบ คือ แบบหลักสูตรอบรมออนไลน์สอนสดผ่านเว็บ (แพคเกจนี้รวมบันทึกการสอนย้อนหลังแล้ว) และแบบวิดีโอบันทึกการสอน โดยหลักสูตรนี้จะสอนเน้นทั้งทฤษฎีและปฏิบัติจริงผ่าน Workshop

คำถาม: สามารถขอใบเสนอราคา ใบแจ้งหนี้ หนังสือชี้ชวนการเข้าอบรมได้อย่างไร
คำตอบ: รบกวนคุณลูกค้าติดต่อ เพจ Babel Coder หรือทางอีเมล์ babelcoder@gmail.com เพื่อขอเอกสารต่าง ๆ ครับ

สอบถามเพิ่มเติมโปรดติดต่อ เพจ Babel Coder