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

Module 1: Introduction to Next.js 16 & App Router

• Next.js 16 Overview: ทำไมต้อง Next.js? (SEO, Performance, Full-stack capabilities)
• Installation: สร้างโปรเจกต์ด้วย create-next-app (TypeScript + Tailwind + ESLint)
• App Directory Structure: เข้าใจโครงสร้าง app/ ที่มาแทน pages/
• Server Components (RSC) vs Client Components:
  • คอนเซปต์การ Render (Server-First)
  • การใช้คำสั่ง "use client" และ "use server"
  • กฎการใช้งาน: เมื่อไหร่ควรใช้ Server หรือ Client Component?
• Project Configuration: การตั้งค่า next.config.mjs และ tsconfig.json เบื้องต้น

Module 2: Routing, Layouts & Navigation

• File-System Based Routing: การสร้าง Route ผ่าน Folder และไฟล์ page.tsx
• Layouts & Templates:
  • layout.tsx (Root Layout & Nested Layouts)
  • การแชร์ UI (Header/Sidebar) ข้ามหน้า
• Navigation:
  • การใช้ Component
  • การใช้ Hook useRouter, usePathname, useSearchParams (จาก next/navigation)
• Dynamic Routes: การรับค่า Params [id] และ Query Strings
• Special Files:
  • loading.tsx (Streaming / Suspense)
  • error.tsx (Error Handling)
  • not-found.tsx (Custom 404)

Module 3: Styling with Tailwind CSS & Fonts

• Tailwind CSS in Next.js: ทบทวนการตั้งค่า tailwind.config.ts
• Styling Fundamentals:
  • Utility Classes (Flexbox, Grid, Spacing, Typography)
  • Responsive Design (sm:, md:, lg:)
  • Pseudo-classes (hover:, focus:)
• Next/Font: การจัดการ Font (Google Fonts) เพื่อ Performance ที่ดีที่สุด
• CSS Modules (Optional): การใช้ .module.css ร่วมกับ Tailwind ในกรณีที่ต้องการ Custom Styles เฉพาะจุด

Module 4: Data Fetching & Server Actions (New Standard)

• Fetching Data in Server Components: การใช้ async/await และ fetch โดยตรง (ไม่ต้องใช้ useEffect)
• Caching & Revalidation: เข้าใจ Static Rendering vs Dynamic Rendering (force-dynamic, revalidate)
• Introduction to Server Actions:
  • การสร้าง Function สำหรับ Handle Form (action={submitFunc})
  • การใช้ revalidatePath เพื่ออัปเดตหน้าเว็บหลังแก้ไขข้อมูล
  • การใช้ redirect เพื่อเปลี่ยนหน้าฝั่ง Server

Module 5: Integrate Shadcn/UI (Modern UI Library)

• Introduction to Shadcn/UI:
  • แนวคิด "Not a library, It's code" (Copy & Paste)
  • ความแตกต่างจาก Material UI หรือ Bootstrap
• Setup & Configuration:
  • การติดตั้งผ่าน CLI (npx shadcn@latest init)
  • โครงสร้างโฟลเดอร์ components/ui และ lib/utils
• Theming: การปรับแต่งสี globals.css (CSS Variables) และ Radius
• Essential Components Workshop:
  • Layout Elements: Card, Separator, Aspect Ratio
  • Interactive: Button, Dropdown Menu, Dialog (Modal), Sheet (Drawer)
  • Form Elements: Input, Label, Textarea, Checkbox
• Dark Mode: การติดตั้ง next-themes เพื่อรองรับ Dark/Light Mode

Module 6: Workshop - Inventory Management System

• Workshop Structure: วางโครงสร้าง Layout (Login Layout vs Dashboard Layout)
• Building Authentication UI:
  • ออกแบบหน้า Login ด้วย Shadcn Card & Form
  • การใช้ React Hook Form + Zod เพื่อทำ Validation (Best Practice)
• Connecting to Backend (Simulation/API):
  • เขียน Server Action เพื่อรับค่า Login และเก็บ Cookie (HTTP-Only)
• CRUD Operations (Stock Page):
  • Read: แสดงรายการสินค้าด้วย Shadcn Table
  • Create: สร้างฟอร์มเพิ่มสินค้าใน Dialog หรือ Sheet
  • Update/Delete: การส่งค่า ID ไปยัง Server Action เพื่อแก้ไข/ลบ
• Production Deployment: การ Build (npm run build) และ Deploy ขึ้น Vercel