Next.JS 14คือ React Framework ที่ใช้ในการพัฒนา SPA (Single Page-Web-Application) ที่บริษัทใหญ่ๆ นิยมมากที่สุดในตอนนี้ เพราะมันใช้เทคนิค SSR Server-Side-Rendering ในการสร้าง HTML โค้ดให้พร้อมที่ฝั่ง Server แล้วส่งไปที่ Client พร้อมใช้งานได้เลย ทำให้โหลดเว็บได้ไวขึ้น โดยเฉพาะพวกมือถือ และ ยังเป็นมิตรกับ SEO (Search Engine Optimazation) อีกด้วย เพราะเทคนิค SSR ทำให้ Google สามารถสแกน HTML Content ในเว็บเราได้โดยทันที เพื่อทำให้ Google เข้าใจว่าเว็บเรามีเนื้อหาเกี่ยวกับเรื่องอะไร และซึ่งส่งผลทำให้ค้นหาเจอได้ง่ายขึ้น เพราะกับพวกเว็บที่เน้นให้คนค้นหาเจอได้ง่าย ซึ่งแตกต่างจากการเขียนด้วย React ธรรมดาที่เป็นแบบ CSR ที่ไม่เป็นมิตรกับ SEO แต่เน้นกระจายโหลดในการ Rendering HTML ไปที่ Client แต่ละเครื่องมากกว่า เพื่อลดภาระงานที่ฝั่ง Server ส่วนมากจะเป็นพวกระบบ Portal ที่ไม่เน้นเรื่อง SEO
เนื้อหาหลักในการพัฒนา Next.JS 14 • Page and component • Server-Side-Rendering (SSR) vs Static Site Generation (SSG) • Data Fetching for SSR - getStaticProps, getStaticPaths, getServerSideProps • Static File Serving • API Routes • Client-Side Fetching SWR • Advanced SWR with Local Mutate and Polling Fetch • AMP (Accelerated Mobile Page Concept) • Typescript support in Next.js • Assets, Metadata • Local and Global CSS • Custom App Component • <head> • Next.JS Environment variables • Next.JS Router static and dynamic • Next.JS Link and customized • getStaticProps and Pre-rendering • next.config.js
Workshop: State and Property • เรียนรู้การเขียน ES7, Typescript และ JSX • การทำ Arrow Function และ ความจำเป็นของมัน • เรียนรู้การทำงานของ State และ Property • การแชร์ข้อมูลไปมาระหว่าง Component ด้วย State and Property
Workshop: Integrate Material-UI • การติดตั้ง Theme MaterialUI & Bootstrap • สร้าง Header, Menu and Footer • การติดตั้ง Bundled Files • การแปลง HTML ให้เป็น JSX • ติดตั้งระบบ Page Navigation with React Router • การทำ Responsive Page ด้วย Flexbox และ Grid system • ติดตั้งระบบ next/router with useRouter, withRouter, • สร้าง Route สำหรับการเปลี่ยนหน้า อาทิ regirter, login, stock, create/edit/delete
Workshop: Basic Login Autentication • ติดตั้ง Axios • ติดตั้ง Backend ด้วย NodeJS / Express / Sequelize (DB ORM) • ติดตั้ง Backend Libraries ที่จำเป็น express body-parser cors sequelize • สร้าง Web API ด้วย NodeJS • สร้าง NodeJS Router ด้วย Express • สร้าง Sub Router • สร้าง REST API สำหรับทดสอบระบบ Authentication (Register and Login) • เรียนรู้การสร้าง DB Model (Code First) เพื่อเชื่อมต่อ SQLITE3 / PostgresSQL • การใช้ Body-Parser ในการแปล HTTP Format แบบ URLEncodeed และ JSON , MultipleParts • เชื่อมต่อ ReactJS Login กับ NodeJS API
เข้าสู่ระบบ
