🚀 บทที่ 1: เริ่มต้นกับ Next.js
ทำความรู้จักกับ Next.js และการติดตั้งโปรเจคแรกของคุณ
วัตถุประสงค์การเรียนรู้
เข้าใจว่า Next.js คืออะไรและแตกต่างจาก React อย่างไร
สามารถติดตั้งและสร้างโปรเจค Next.js ใหม่ได้
เข้าใจโครงสร้างไฟล์และโฟลเดอร์ของ Next.js
รู้จักฟีเจอร์หลักๆ ของ Next.js
🤔 Next.js คืออะไร?
Next.js เป็น React Framework ที่ถูกพัฒนาโดย Vercel เพื่อช่วยให้การสร้างเว็บแอปพลิเคชันด้วย React ง่ายและมีประสิทธิภาพมากขึ้น โดย Next.js มาพร้อมกับฟีเจอร์ที่จำเป็นสำหรับการ production ทั้งหมด
ความแตกต่างหลักระหว่าง React และ Next.js 15:
⚛️ React (Library)
• ต้องตั้งค่าเองทุกอย่าง
• Client-side rendering เท่านั้น
• ต้องติดตั้ง routing เพิ่ม
• ไม่มี SEO optimization
• ต้องจัดการ bundling เอง
⚡ Next.js 15 (Framework)
• มาพร้อมการตั้งค่าเบื้องต้น
• SSR, SSG, CSR ในตัว
• File-based routing ง่าย
• SEO-friendly ตั้งแต่แรก
• Turbopack (เร็วกว่า Webpack 96%)
• React 19 พร้อมใช้
🌟 ฟีเจอร์เด่นของ Next.js:
⚛️ React 19 Support
รองรับ React 19 เต็มรูปแบบ พร้อม Server Components และ Actions
⚡ Turbopack (Stable)
bundler ใหม่ที่เร็วกว่า Webpack ถึง 96.3% สำหรับ development
💾 Enhanced Caching
Caching system ใหม่ที่ไม่ cache โดย default แต่ควบคุมได้ง่ายขึ้น
📊 Static Route Indicator
แสดงสถานะ route ว่าเป็น static หรือ dynamic ใน development
🔌 API Routes (Enhanced)
สร้าง API endpoints ในโปรเจคเดียวกัน พร้อม async request APIs
📁 File-based Routing
สร้าง routes โดยการสร้างไฟล์ในโฟลเดอร์ app/
💻 การติดตั้ง Next.js
ตรวจสอบ Node.js
ตรวจสอบว่าติดตั้ง Node.js เวอร์ชัน 18.18.0 หรือใหม่กว่า (Next.js 15 ต้องการ Node.js 18.18.0+)
คำสั่ง:
$ node --version
สร้างโปรเจค Next.js ใหม่
เข้าไปในโฟลเดอร์โปรเจค
รันเซิร์ฟเวอร์ Development
📁 โครงสร้างโปรเจค Next.js
หลังจากสร้างโปรเจคเสร็จแล้ว คุณจะพบโครงสร้างไฟล์และโฟลเดอร์ดังนี้:
my-nextjs-app/ ├── app/ │ ├── globals.css │ ├── layout.tsx │ └── page.tsx ├── public/ │ ├── next.svg │ └── vercel.svg ├── next.config.js ├── package.json ├── tailwind.config.js └── tsconfig.json
โฟลเดอร์หลักสำหรับ App Router (Next.js 13+) พร้อม React 19 support
Layout หลักของเว็บไซต์ รองรับ React 19 features
หน้าแรก (Home page) พร้อม enhanced performance
CSS สำหรับทั้งเว็บไซต์
ไฟล์ static เช่น รูปภาพ, favicon
การตั้งค่า Next.js 15 (รองรับ next.config.ts แล้ว)
รายการ dependencies และ scripts พร้อม Next.js 15
การตั้งค่า TypeScript
🎯 ยินดีด้วย! คุณเรียนจบบทที่ 1 แล้ว
ตอนนี้คุณรู้จัก Next.js 15 และติดตั้งเรียบร้อยแล้ว! พร้อมสำหรับการเรียนรู้เรื่อง File-based Routing ในบทถัดไป