Basic Next.js สำหรับผู้เริ่มต้น

Basic Next.js สำหรับผู้เริ่มต้น

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)
15/06/2023 14:27:31