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

แจกฟรี 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