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

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

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

ปัจจุบันมีเว็บไซต์ที่เป็นลักษณะ Single Page Application (SPA) มากมายที่ถูกพัฒนาด้วย Next.js ทั้งเว็บไซต์องค์กร อีคอมเมิซ และเว็บสื่อการสอนต่างๆ

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

ปกติราคาหลักสูตรนี้ด้วยระยะเวลาและเนื้อหาที่นำมาสอนจะมีราคาเต็มอยู่ที่ 4,000 บาท แต่ทางทีมงานของสถาบันนำมาจัดราคารุ่นออนไลน์ ด้วยราคาพิเศษ

((( เปิดลงทะเบียนพร้อมกันตั้งแต่วันที่ 11 พฤษภาคม 2564 เวลา 14.00 น. เป็นต้นไป)))

  • สำหรับ 50 ท่านแรกราคา 400 บาท
  • ลำดับที่ 51-100 ราคา 500 บาทเท่านั้นครับ
  • ลำดับที่ 101 เป็นต้นไปที่ราคา 600 บาทเท่านั้นครับ

การอบรมในหลักสูตรนี้เป็นการสอนสดออนไลน์ ผ่านโปรแกรม cisco webex conference และมีการบันทึกการอบรมส่งให้ดูย้อนหลังทั้งหลักสูตรครับ

กำหนดการณ์อบรม

  • วันที่ 14-16 พฤษภาคม 2564 เวลา 20:00-23.00 น.
  • อบรมรวม 3 วัน เฉลี่ยวันละ 3 ชั่วโมง
  • ระยะเวลารวมทั้งหลักสูตร 9 ชั่วโมง
อบรมออนไลน์ (สอนสด)
  • 14 - 16 พฤษภาคม 2021
  • 9 ชั่วโมง

แจกฟรี Next.js Admin Template with Bootstrap

Key features

  • Built on the top of NextJS and Bootstrap
  • Integrated with Redux and Redux Saga
  • Authentication with Firebase
  • Includes many reusable UI components
  • Responsive and mobile-friendly
  • Modern and clean design
  • Fully developed with SCSS

Included files

  • JS
  • SCSS
  • Some images for supporting
  • Documentation in HTML and PDF


ภาพรวมหัวข้อการอบรม

  • Module 1: พื้นฐาน Next.js 10.x
  • Module 2: การทำงานกับ Routing
  • Module 3: การใช้ Style Component
  • Module 4: การใช้ Tailwind CSS ใน Next.js
  • Module 5: Integrate Material-UI
  • Module 6: Basic Login Authentication
  • Module 7: Next.js Rest API
  • Module 8: Server Side Rendering
  • Module 9: Deployment

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

Module 1: พื้นฐาน Next.js 10.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 Page

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
  • Tailwind workshop with Next.js

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)

Module 7: Next.js Rest API

  • API Section Intro
  • Creating APIs with Next.js
  • req and res objects
  • Simple JWT Auth Example

Module 8: Server Side Rendering

  • getStaticProps
  • revalidate parameter
  • getStaticPaths
  • getServerSideProps

Module 9: Deployment

  • Install Nginx Webserver
  • How to build on production
  • CORS Problem solve
  • Fallback URL Problem solve

9 ชั่วโมง

ราคา 600 บาท

ลงทะเบียนแล้ว

150 คน

สั่งซื้อวิดีโอบันทึกการอบรม
ติดต่อตามข้อมูลด้านล่างนี้