เริ่มต้นสร้างโปรเจกต์ Next.js และตั้งค่าโครงสร้าง Frontend เบื้องต้น

1. สร้างโปรเจกต์ Next.js ใหม่

วิธีที่ง่ายที่สุดในการเริ่มต้นคือการใช้ create-next-app ซึ่งเป็นเครื่องมืออย่างเป็นทางการจากทีม Next.js

เปิด terminal แล้วรันคำสั่งต่อไปนี้

npx create-next-app@latest my-next-app

หลังจากรันคำสั่ง ระบบจะถามคำถามบางอย่าง สำหรับโปรเจกต์ส่วนใหญ่ ผมมักจะเลือกตามนี้

• ใช้ TypeScript: Yes
• ใช้ ESLint: Yes
• ใช้ Tailwind CSS: Optional (ขึ้นอยู่กับความถนัด)
• ใช้ App Router: Yes
• ใช้โฟลเดอร์ src: Optional
• ใช้ Turbopack: Optional

เมื่อติดตั้งเสร็จแล้ว ให้เข้าไปที่โฟลเดอร์โปรเจกต์

cd my-next-app

2. เริ่มรัน Development Server

เพื่อรันโปรเจกต์ในเครื่อง ให้ใช้คำสั่ง

npm run dev

จากนั้นเปิดเบราว์เซอร์แล้วเข้าไปที่: http://localhost:3000

ถ้าทุกอย่างตั้งค่าถูกต้อง คุณจะเห็นหน้าเริ่มต้นของ Next.js แสดงขึ้นมา

3. ทำความเข้าใจกับโครงสร้าง App Router

เมื่อใช้ App Router โค้ดส่วนใหญ่จะอยู่ในโฟลเดอร์ app

โครงสร้างพื้นฐานจะมีลักษณะประมาณนี้
app
├─ layout.tsx
├─ page.tsx
└─ globals.css

page.tsx คือหน้าหลักของแต่ละ route

layout.tsx ใช้สำหรับครอบหน้าและแชร์ layout ร่วมกัน

globals.css ใช้สำหรับกำหนดสไตล์แบบ global

โครงสร้างนี้ช่วยให้การจัดการ routing เข้าใจง่ายกว่าการใช้ Pages Router แบบเดิม

4. แก้ไขหน้าแรกของโปรเจกต์

เปิดไฟล์ app/page.tsx แล้วลองแก้ไขโค้ดดังนี้

export default function Home() {
  return (
    <main>
      <h1>Hello Next.js App Router</h1>
      <p>This is my first Next.js page.</p>
    </main>
  );
}

เมื่อบันทึกไฟล์ เบราว์เซอร์จะรีเฟรชอัตโนมัติและแสดงผลลัพธ์ที่แก้ไขทันที

5. ตั้งค่า Frontend เบื้องต้น

ในขั้นตอนนี้ ผมมักจะเริ่มเตรียมโครงสร้าง frontend พื้นฐาน เช่น

• ตั้งค่า global styles
• สร้างโฟลเดอร์ components
• กำหนดโครงสร้าง layout อย่างง่าย

ตัวอย่างเช่น คุณอาจสร้างโฟลเดอร์ components ไว้ภายใน app หรือ src เพื่อจัดเก็บ UI component ที่สามารถนำกลับมาใช้ซ้ำได้