Next.js เป็น React Web Framework ยอดนิยมคล้ายๆ กับการสร้างด้วย Create React App (CRA) แต่จุดเด่นที่เป็นหัวใจสำคัญของ Next.js คือเป็นลักษณะ Framework ที่เราแทบไม่ต้อง Config อะไรเลย โครงสร้างทุกอย่างถูกออกแบบมาอย่างดี พร้อมเอาขึ้นงานบน Production ได้ทันที ฟีเจอร์ที่ถือเป็นไฮไลท์เลยก็คือ การรองรับ SEO เต็มรูปแบบ ด้วยความสามารถของ Server-Side Rendering (SSR) แบบอัตโนมัติตั้งแต่เริ่มติดตั้ง ทำให้ลดเวลาในการพัฒนาลงไปได้มาก

ในหลักสูตรนี้ผู้เข้าอบรมจะได้เรียนรู้ตั้งแต่พื้นฐานการเซ็ตอัพ Next.js project การทำงานกับ Routing การออกแบบส่วน UI ด้วย Tailwind CSS และ Material-UI การทำ Authentication การเขียน Next.js เชื่อมต่อกับ Rest API ด้วย Node.js ไปจนถึงการนำ Next.js ไปใช้งานจริงบน Cloud Server ต่างๆ

สาขากรุงเทพฯ (ลาดพร้าว)
  • ยังไม่มีรอบเปิดอบรม (ลงชื่อจองไว้ได้)
  • เข้าใจพื้นฐานการเซ็ตอัพ Next.js project
  • เข้าใจแนวทางการออกแบบส่วน UI ด้วย Tailwind CSS และ Material-UI
  • เข้าใจและสามารถเขียน Next.js เชื่อมต่อกับ Rest API ด้วย Node.js ได้
  • สามารถประยุกต์นำ Next.js Framework ไปใช้งานในโปรเจ็กต์ของผู้เรียนได้
  • นักเรียนนักศึกษา
  • ครู อาจารย์ วิทยากรที่สนใจ
  • นักวิชาการ นักไอที หรือผู้ดูและระบบ
  • ตลอดจนผู้สนใจทั่วไป
  • พื้นฐานการเขียนโปรแกรมมิ่ง
  • พื้นฐานการทำงานกับเว็บแอพพลิเคชั่น
  • พื้นฐานการใช้งานฐานข้อมูล
  • พื้นฐานการพัฒนาเว็บไซต์
  • 12 ชั่วโมง
  • ราคาปกติ 6,500 บาท / คน
  • โปรโมชั่นลด 10% เหลือ 5,850 บาท / คน
  • ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
  • ขอใบเสนอราคา

Module 1: พื้นฐาน Next.js 12.x

  • Next.js Introduction
  • Installing Next.js
  • File Structure Explained
  • Pages Explained
  • _document.tsx file explained
  • _app.tsx file explained

Module 2: การทำงานกับ Routing

  • Simple Routing
  • Link component
  • Nested Routing
  • Dynamic Routing
  • useRouter
  • Catch All Route
  • Custom 404 Pag

Module 3: การใช้ Style Component

  • Style section introduction
  • Styled JSX
  • Global Styles
  • CSS Modules
  • Sass Modules
  • File Structure

Module 4: การใช้ Tailwind CSS ใน Next.js

  • Install Tailwind dependencies
  • Configure Tailwind to remove unused styles from production
  • Add the global stylesheet

Module 5: Integrate Material-UI

  • Setup Theme MaterialUI & Bootstrap
  • Create Header, Menu and Footer
  • Install Bundled Files
  • Convert HTML to JSX
  • Install Page Navigation with React Router
  • Create Responsive Page with Flexbox and Grid system
  • Setup next/router with useRouter, withRouter
  • Create Route for regirter, login, stock, create/edit/delete

Module 6: Basic Login Authentication

  • Install Axios
  • Install Backend with NodeJS / Express / Sequelize (DB ORM)
  • Install Backend Libraries for express body-parser cors sequelize
  • Create Web API with NodeJS
  • Create NodeJS Router ด้วย Express
  • Create Sub Router
  • Create REST API for test Authentication (Register and Login)
06/11/2024 13:52:02