โครงสร้างโปรเจกต์ Next.js
Text
my-website/
├── app/
│ ├── page.tsx
│ ├── layout.tsx
│ └── globals.css
├── components/
│ ├── Navbar.tsx
│ ├── Hero.tsx
│ ├── Problem.tsx
│ ├── Services.tsx
│ ├── Pricing.tsx
│ ├── FAQ.tsx
│ └── Footer.tsx
├── public/
│ └── images/
├── package.json
└── README.mdไฟล์สำคัญ:
- `app/page.tsx` คือหน้าหลักของเว็บไซต์
- `app/layout.tsx` คือโครงหลักของเว็บ เช่น metadata, font และ layout หลัก
- `app/globals.css` คือไฟล์ CSS หลัก
- `components/` คือโฟลเดอร์เก็บส่วนประกอบของหน้าเว็บ
- `public/` คือโฟลเดอร์เก็บรูปภาพ โลโก้ ไอคอน หรือไฟล์ Static
- `package.json` คือไฟล์เก็บข้อมูลโปรเจกต์และคำสั่งสำหรับรันเว็บ
| ไฟล์/โฟลเดอร์ | ใช้เมื่อไร | ตัวอย่างสิ่งที่แก้ |
|---|---|---|
| app/page.tsx | เมื่อต้องจัดลำดับ Section หน้าแรก | เพิ่ม/ลบ Component หรือเปลี่ยนลำดับ Hero, FAQ, Footer |
| app/layout.tsx | เมื่อต้องตั้งค่า layout รวมของเว็บ | metadata, font, โครง HTML หลัก |
| app/globals.css | เมื่อต้องตั้งค่า style รวม | สีพื้นฐาน, body, utility เพิ่มเติม |
| components/ | เมื่อต้องแก้ Section เฉพาะจุด | Hero.tsx, Pricing.tsx, FAQ.tsx |
| public/ | เมื่อต้องใส่รูป โลโก้ หรือไฟล์ static | logo.png, hero-image.webp |