พื้นฐาน NextJS

ยินดีด้วยครับ! คุณมาถึง "จุดสูงสุด" ของการทำ Web Development ในปัจจุบันแล้ว Next.js คือ Framework ที่สร้างครอบ React อีกทีหนึ่ง (React คือห้องเครื่อง แต่ Next.js คือรถที่ประกอบเสร็จพร้อมขับ)

ในยุค Agentic Coding นี้ Next.js คือตัวเลือกอันดับ 1 ของ AI เพราะมันมีมาตรฐานที่ชัดเจนมาก ทำให้ AI วางโครงสร้างโปรเจกต์ให้คุณได้อย่างแม่นยำครับ

1. ทำไมต้อง Next.js? (ในเมื่อมี React อยู่แล้ว)

ถ้าใช้ React เพียวๆ คุณต้องตั้งค่าระบบ Routing (การสลับหน้า), การดึงข้อมูล, และการจัดการรูปภาพเองทั้งหมด แต่ Next.js จัดการให้ทันที:

File-based Routing: แค่สร้างไฟล์ในโฟลเดอร์ app หน้าเว็บก็เกิดขึ้นทันที
Fast & SEO Friendly: เว็บโหลดเร็วมาก และ Google ค้นหาเจอง่าย (เพราะมี Server-Side Rendering)
Fullstack: เขียนได้ทั้งหน้าบ้าน (Frontend) และหลังบ้าน (API/Database) ในโปรเจกต์เดียว

2. การแบ่งหน้า (Routing)

ใน Next.js (App Router) การสร้างหน้าเว็บใหม่ทำได้ง่ายๆ แค่สร้าง Folder และไฟล์ page.js ครับ

app/page.js → จะกลายเป็นหน้าแรก (/)
app/about/page.js → จะกลายเป็นหน้า (/about)
app/contact/page.js → จะกลายเป็นหน้า (/contact)

3. Server vs Client Components

นี่คือจุดที่ Next.js ต่างจาก React ทั่วไป และเป็นเรื่องที่ต้องเข้าใจครับ:

Server Components (ค่าเริ่มต้น): Code ส่วนนี้รันบน Server ข้อดีคือโหลดเร็วและปลอดภัย (เหมาะกับพวกหน้าโชว์เนื้อหา, ดึงข้อมูลจากฐานข้อมูล)
Client Components: ต้องใส่คำว่า "use client" ไว้บนสุดของไฟล์ ใช้สำหรับส่วนที่มีการโต้ตอบกับผู้ใช้ (เช่น ปุ่มกด, แบบฟอร์ม, การใช้ useState)

4. ตัวอย่าง Code: หน้าประวัติส่วนตัว (Simple Profile)

ลองดูความง่ายของการสร้างหน้าเว็บด้วย Next.js ผสมกับ Tailwind CSS ครับ:

// app/profile/page.js

import Image from 'next/image' // Next.js ช่วยจัดการเรื่องรูปให้โหลดเร็ว

export default function ProfilePage() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50">
      <div className="bg-white p-8 rounded-2xl shadow-xl text-center">
        {/* ใช้คอมโพเนนต์ Image ของ Next.js */}
        <div className="w-24 h-24 bg-blue-500 rounded-full mx-auto mb-4" />
        
        <h1 className="text-3xl font-bold text-gray-800">MilerDev</h1>
        <p className="text-gray-500">Fullstack Developer & Content Creator</p>
        
        <div className="mt-6 flex gap-4">
          <button className="bg-black text-white px-6 py-2 rounded-lg hover:bg-gray-800">
            Follow
          </button>
          <button className="border border-gray-300 px-6 py-2 rounded-lg hover:bg-gray-100">
            Message
          </button>
        </div>
      </div>
    </div>
  )
}

5. ยุค Agentic Coding กับ Next.js

ทำไม AI ถึงชอบ Next.js?

Zero Config: AI ไม่ต้องเสียเวลาแก้ไฟล์ Webpack หรือการตั้งค่าซับซ้อน มันเริ่มเขียน Code ได้ทันที
API Routes: คุณสามารถสั่ง AI ว่า "สร้าง API สำหรับรับค่าจากฟอร์มแล้วส่งอีเมล" AI จะสร้างไฟล์ใน app/api/send/route.js ให้คุณเสร็จสรรพ
Vercel Deployment: เมื่อทำเสร็จ คุณแค่คลิกไม่กี่ที (หรือให้ AI ช่วยจัดการผ่าน CLI) เว็บคุณก็จะออนไลน์ไปทั่วโลกทันที