Mission 2: สำรวจโครงสร้าง Next.js

เป้าหมายของ Mission นี้: อ่านโครงสร้างโฟลเดอร์ของโปรเจค Next.js ออก และรู้ว่า แต่ละไฟล์/โฟลเดอร์ทำหน้าที่อะไร

โครงสร้างโปรเจค Next.js

เมื่อสร้างโปรเจค Next.js ใหม่ คุณจะเจอโฟลเดอร์และไฟล์หน้าตาประมาณนี้:

my-frontend-project/
  app/
    page.tsx        ← โค้ดของหน้าแรก (โฮมเพจ)
    layout.tsx       ← โครงหลักที่ครอบทุกหน้า (เช่น Navbar, Footer ที่ซ้ำทุกหน้า)
    globals.css       ← CSS ตั้งต้นที่ใช้ทั้งเว็บ
  public/           ← เก็บไฟล์รูปภาพ/ไอคอนที่เว็บเรียกใช้ตรงๆ
  package.json       ← รายการ dependency ทั้งหมด และคำสั่งที่ใช้รันโปรเจค

จำ 3 จุดนี้ให้แม่น

• อยากแก้ หน้าตาของหน้าแรก → ไปที่ app/page.tsx
• อยากเพิ่ม รูปภาพ → วางไฟล์ไว้ใน public/
• อยากรู้ว่าโปรเจคนี้ติดตั้ง library อะไรไว้บ้าง → เปิดดู package.json

คำศัพท์สำคัญ

ลองตอบ Quiz ด้านล่างเพื่อเช็กความเข้าใจก่อนไปต่อ