Next.js Advanced ขั้นสูง

Module 1: Introduction

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

Module 2: Styling

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

Module 3: Next.js APIs

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

Module 4: Routing

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

Module 5: Server Side Rendering

• getStaticProps
• revalidate parameter
• getStaticPaths
• getServerSideProps

Module 6: Redux

• Install Redux, React-Redux, Redux-Thunk, Redux-Logger
• Introduction to Redux , Why use Redux
• Unidirectional Data Flow
• Redux (Action, Reducer, Store) Structure
• Extension and plugin for Redux
• Debug / Log  data (State) with Redux-Logger

Module 7: 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)
• Learning DB Model (Code First) for  SQLITE3 / PostgresSQL
• Use Body-Parser for HTTP Format with URLEncodeed and JSON , Multiple Parts
• Connect ReactJS Login with NodeJS API

Module 8: 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 9: Deployment

• Install Nginx Webserver
• Instll PM2 Node Monitor
• How to build on production
• CORS Problem solve
• Fallback URL Problem solve

Module 10: Tip and Tricks

• Next.js Plugin for work
• Best Practice for Next.js
• Next.js 3rd Library for work