วีดีโอสอน Next.JS SSR React Framework (พร้อมซอสโค้ด) | 1,133 min.
โปรโมชั่น ราคา 1,350 บาท (ไม่รวม Vat.) ดูวีดีโอ (ทั้งหมด)
สั่งซื้อวีดีโอ

 

Next.JS คือ React Framework ที่ใช้ในการพัฒนา SPA (Single Page-Web-Applicatioin) ที่บริษัทใหญ่ๆ นิยมมากที่สุดในตอนนี้ เพราะมันใช้เทคนิต 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 ใช้ React เป็น Core Library ฉะนั่นคนที่เคยเขียน React มาแล้วบ้าง หรือมีความรู้เรื่องภาษา (ES7/ Typescript / JSX / Javascript) จะสามารถหัดเขียน Next.js ได้ไม่ยากเลย Next.js เป็น SSR SPA ของฝั่ง React ซึ่ง ถ้าใครเคยใช้พวก Nuxt.js ของ Vue หรือ Angular Universal ก็ให้รู้ไว้เลย ว่ามันทำงานเหมือนกัน คือมันเป็น SSR เขียนยากขึ้นมาอีกระดับ แต่มีประสิทธิภาพที่ดีกว่า

ในหลักสูตรนี้นักเรียนจะได้เรียน Next.JS ผ่านระบบ Stock Workshop ที่มีเรื่อง JWT Authenication, Insert, Query, Update, Delete สินค้า และ Image Upload, Form, State Managment ด้วย Redux เหมือนกับในหลักสูตร React.JS Programming ที่เป็นแบบ CSR แต่ในหลักสูตรนี้เราจะ Advance มากขึ้นด้วย SSR และเข้าใจความแตกต่างระหว่าง CSR กับ SSR อย่างถ่องแท้ *หมายเหตุ ผู้เรียนควรมีความรู้พื้นฐาน React.JS มาบ้างนิดหน่อย

 


การติดตั้งและเรียนรู้การใช้เครื่องมือในการพัฒนา
    • การติดตั้ง Node.JS
    • การติดตั้ง Next.JS CLI 
    • การติดตั้ง Visual Studio และ React Extension Pack
    • การติดตั้ง Postman
    • การใช้งาน Next.js CLI เบื้องต้น
    • การทำ Code Format and Completion และ อื่นๆ
    • การวิเคราะห์ Error ตอน compile time
    • การใช้งาน Debugging (ChromeDev and VSCode) / JS Debugging / Auto Reload
    • รันแบบ Development
    • เปรียบเทียบความแตกต่างระหว่าง React CSR กับ React SSR ที่ใช้ Next.js


เนื้อหาหลักในการพัฒนา React.JS
    • โครงสร้าง Next.JS Project
    • ภาษาที่ใช้ในการเขียน React และ Next.JS (ES7 and JSX) เบื้องต้น
    • การใช้งาน React Component และ UI เบื้องต้น
    • การส้ราง Class and Functional components
    • เครื่องแปลง HTML ให้เป็น JSX
    • การใช้งาน Data Binding (Props and State)
    • React Hooks useState, useEffect, useSelector, useDispatch

    • การดัก Event ที่เกิดขึ้นกับ UI Components แต่ละตัวเช่น การคลิกที่ Button, Input
    • การใช้งาน Redux (Unidirectional DataFlow)
    • การส่งและรับค่าระหว่าง Pages
    • การใช้งาน Redirect React Routing Page
    • การใช้งาน Secured React Routing Page
    • เข้าใจหลักการทำงาน ของ Component LifeCycle Events
    • การใช้งาน Library 3rd Party
    • การ Compile และ Run โปรเจค

เนื้อหาหลักในการพัฒนา Next.JS
    • Page and component
    • Server-Side-Rendering (SSR) vs Static Generation (SG)
    • Data Fetching for SSR - getStaticProps, getStaticPaths, getServerSideProps
    • Static File Serving
    • API Routes
    • Client-Side Fetching SWR
    • Advancecd 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


Workshop: Redux
    • ติดตั้ง Redux, React-Redux, Redux-Thunk, Redux-Logger
    • ทำความเข้าใจ ความจำเป็นในการใช้ Redux
    • ความหมายของ Unidirectional Data Flow
    • การขึ้นโครง Redux (Action, Reducer, Store)
    • Extension and plugin ที่ช่วยทำให้การใช้ Redux ง่ายขึ้น
    • การ Debug / Log ข้อมูล (State) ด้วย Redux-Logger


Workshop: Stock
    • ทดลองสร้างระบบคลังสินค้า ที่ประยุกต์ความหลายเรื่องๆ ด้วยกัน Redux, Redux-Form, Upload
    • ติดตั้ง Redux
    • การใช้ Formik เพื่อให้ข้อมูลในหน้า Form 
    • สร้าง Web API ที่ NodeJS สำหรับ Insert / Update / Query / Delete
    • ทำหน้าแสดงผล สำหรับรายการสินค้า Stock-List
    • Stock Create + Upload Image
    • Stock Edit + Change Image


Workshop: Deployment
    • ติดตั้ง Nginx Webserver
    • ติดตั้ง PM2 Node Monitor
    • การ build แบบ production
    • แก้ไขปัญหาเรือง CORS
    • แก้ไขปัญหาเรื่อง Fallback URL


Tips, Plug-in, Best Practices Videos (อัพเดทใหม่ๆ อยู่ตลอด)
    • Next.js Plugin ที่น่าสนใจ
    • เทคนิคการเขียนให้มีประสิทธิภาพ
    • Next.js 3rd Library ที่มีมาอัพเดทให้ดูกันเรื่อยๆ
    • และคลิปที่มีประโยชน์อีกมากมาย ที่ทำมาให้ดูกันอยู่เรื่อยๆ