Next.js พื้นฐาน

เรียนรู้ Next.js 15 ตั้งแต่เริ่มต้นจนใช้งานได้จริง ครอบคลุม Server Components, App Router และฟีเจอร์ใหม่ล่าสุด

18/18 บทเรียน
13 ชั่วโมง 5 นาที
ฟรี 100%

ทำไมต้องเรียนหลักสูตรนี้?

หลักสูตรที่ออกแบบมาเพื่อมือใหม่โดยเฉพาะ พร้อมตัวอย่างจริงและ interactive demos
High Performance

Built-in optimizations for lightning-fast applications

Enterprise Security

Production-ready security features out of the box

Developer Experience

Modern tooling with TypeScript and hot reload

Scalable Architecture

From prototype to enterprise-grade applications

เทคโนโลยีที่จะได้เรียนรู้

Next.js 15
React 19
TypeScript
MUI v6
Prisma 6.8
Zod

📚 บทเรียนที่พร้อมใช้งาน

18 บทเรียน • เริ่มเรียนได้ทันที • อัพเดตเนื้อหาสม่ำเสมอ
18/18 พร้อมใช้งาน
13 ชม. 5 นาที
🎯 เนื้อหาหลักสูตรที่คุณจะได้เรียนรู้

📱 Frontend Development:

Next.js 15, React 19, TypeScript, MUI v6, React Hook Form, State Management

🗄️ Backend Development:

API Routes, Prisma 6.8, Database, Authentication, Middleware, Security

🛠️ Tools & Libraries:

Zod Validation, Zustand, Testing, Performance, Deployment

🎯 เหมาะสำหรับ:

มือใหม่หัดเขียนโปรแกรม, นักเรียน, นักศึกษา, นักพัฒนาที่ต้องการอัพสกิล

🚀
บทที่ 1: เริ่มต้นกับ Next.js
เริ่มต้น
45 นาที

เรียนรู้พื้นฐานการติดตั้งและใช้งาน Next.js 15 พร้อม TypeScript และ MUI

ความยาก25%
การติดตั้ง Next.js
โครงสร้างโปรเจค
TypeScript
+1
📁
บทที่ 2: File-based Routing
เริ่มต้น
30 นาที

ทำความเข้าใจ App Router และการจัดการ routing ใน Next.js 15

ความยาก25%
App Router
Dynamic Routes
Route Groups
+1
🔄
บทที่ 3: Server vs Client Components
ปานกลาง
25 นาที

เข้าใจความแตกต่างระหว่าง Server และ Client Components ใน React 19

ความยาก65%
Server Components
Client Components
Hydration
+1
🔗
บทที่ 4: Link และ Navigation
เริ่มต้น
20 นาที

การใช้งาน Next.js Link และ Navigation ที่มีประสิทธิภาพ

ความยาก25%
Next.js Link
useRouter
Programmatic Navigation
+1
📊
บทที่ 5: Data Fetching & API Routes
ปานกลาง
40 นาที

เรียนรู้การดึงข้อมูลและสร้าง API ใน Next.js 15

ความยาก65%
fetch API
API Routes
Server Actions
+1
🗄️
บทที่ 6: Prisma & Database
ปานกลาง
50 นาที

การใช้งาน Prisma 6.8.0 สำหรับจัดการฐานข้อมูลพร้อมฟีเจอร์ใหม่

ความยาก65%
Prisma Setup
Schema Design
CRUD Operations
+1
🪝
บทที่ 7: React Hooks (useState & useEffect)
ปานกลาง
35 นาที

เรียนรู้ React Hooks สำคัญและการใช้งานใน Next.js 15

ความยาก65%
useState
useEffect
Custom Hooks
+1
🛡️
บทที่ 8: Zod Validation
ปานกลาง
40 นาที

การใช้ Zod สำหรับ type-safe validation และ schema validation

ความยาก65%
Schema Validation
Form Validation
API Validation
+1
🔐
บทที่ 9: Authentication & Authorization
ขั้นสูง
60 นาที

การสร้างระบบ authentication ด้วย NextAuth.js และ JWT

ความยาก90%
NextAuth.js
JWT
Session Management
+1
🏪
บทที่ 10: State Management (Zustand)
ปานกลาง
45 นาที

การจัดการ global state ด้วย Zustand อย่างมีประสิทธิภาพ

ความยาก65%
Zustand Store
Persist Middleware
Devtools
+1
📝
บทที่ 11: Forms & React Hook Form
ปานกลาง
50 นาที

การสร้างฟอร์มที่มีประสิทธิภาพด้วย React Hook Form และ Zod

ความยาก65%
React Hook Form
Form Validation
Dynamic Forms
+1
🛡️
บทที่ 12: Middleware & Security
ขั้นสูง
40 นาที

การใช้ Next.js Middleware สำหรับ security และ request handling

ความยาก90%
Middleware
CORS
Rate Limiting
+1
🧪
บทที่ 13: Testing (Jest & Testing Library)
ขั้นสูง
55 นาที

การเขียน unit tests และ integration tests สำหรับ Next.js

ความยาก90%
Jest Setup
Testing Library
Component Testing
+1
บทที่ 14: Performance Optimization
ขั้นสูง
45 นาที

การเพิ่มประสิทธิภาพแอปพลิเคชัน Next.js ด้วยเทคนิคต่างๆ

ความยาก90%
Image Optimization
Code Splitting
Caching
+1
🚀
บทที่ 15: Deployment & DevOps
ขั้นสูง
50 นาที

การ deploy Next.js app ไปยัง Vercel, Docker และ cloud platforms

ความยาก90%
Vercel Deployment
Docker
Environment Variables
+1
🎯
บทที่ 16: Advanced Patterns & Best Practices
ขั้นสูง
60 นาที

รูปแบบขั้นสูงและ best practices สำหรับ Next.js applications

ความยาก90%
Design Patterns
Architecture
Error Boundaries
+1
🛡️
บทที่ 17: TypeScript & Interface ใน Next.js
ปานกลาง
50 นาที

เรียนรู้การใช้ TypeScript และการสร้าง Interface เพื่อเขียนโค้ดที่ปลอดภัย

ความยาก65%
TypeScript Basics
Interface Definition
Component Props
+1
บทที่ 18: Functions & Constants อย่างละเอียด
เริ่มต้น
45 นาที

เรียนรู้การเขียน Functions และการใช้ Constants ใน JavaScript/TypeScript

ความยาก25%
Function Types
Arrow Functions
Constants & Scope
+1

บทเรียนที่กำลังจะมา

พร้อมเป็น Next.js Developer แล้วหรือยัง?

เริ่มต้นการเดินทางสู่การเป็น Full-stack Developer ด้วย Next.js จากพื้นฐานไปจนถึงระดับมืออาชีพ
เริ่มเรียนบทที่ 1