2025-03-04 15:53:46 +07:00
|
|
|
|
1. โครงสร้างไฟล์หลักและการจัดเก็บรูปภาพ
|
|
|
|
|
|
1.1โฟลเดอร์ app/:
|
|
|
|
|
|
เป็นโครงสร้างพื้นฐานของ Next.js 15
|
|
|
|
|
|
มีไฟล์หลักเช่น layout.tsx, page.tsx, และโฟลเดอร์ย่อยต่าง ๆ
|
|
|
|
|
|
1.2โฟลเดอร์ app/assets/:
|
|
|
|
|
|
เก็บไฟล์รูปภาพทั้งหมด เช่น image.png, image2.png, image3.png, ฯลฯ
|
|
|
|
|
|
แนะนำให้ย้ายไปไว้ใน /public/assets/ เพื่อให้ Next.js สามารถเรียกใช้งานได้สะดวก (ถ้าเป็นการแสดงรูป Static)
|
|
|
|
|
|
1.3โฟลเดอร์ components/:
|
|
|
|
|
|
เก็บคอมโพเนนต์ย่อย ๆ ของโปรเจกต์ เช่น Navbar.tsx, HeroSection.tsx, หรืออื่น ๆ
|
|
|
|
|
|
ในตัวอย่าง เรารวมโค้ดทั้งหมดไว้ในคอมโพเนนต์เดียว (เช่น page.tsx) แต่ในงานจริงอาจแยกแต่ละ Section ออกเป็นไฟล์คอมโพเนนต์ต่างหากเพื่อให้ง่ายต่อการดูแล
|
|
|
|
|
|
|
|
|
|
|
|
2. ขั้นตอนการติดตั้งและรันโปรเจกต์
|
|
|
|
|
|
2.1ติดตั้ง Dependencies
|
|
|
|
|
|
ใช้คำสั่ง npm install หรือ yarn เพื่อให้ได้ package ของ Next.js, React, และ Tailwind CSS
|
|
|
|
|
|
2.2ตั้งค่า Tailwind CSS
|
|
|
|
|
|
เปิดไฟล์ tailwind.config.js (หรือ .ts) แล้วกำหนด content ให้ครอบคลุมทุกไฟล์ที่มีการใช้งาน Tailwind เช่น
|
|
|
|
|
|
content: [
|
|
|
|
|
|
"./app/**/*.{js,ts,jsx,tsx}",
|
|
|
|
|
|
"./components/**/*.{js,ts,jsx,tsx}",
|
|
|
|
|
|
...
|
|
|
|
|
|
]
|
|
|
|
|
|
2.3รันโปรเจกต์
|
|
|
|
|
|
ใช้คำสั่ง npm run dev หรือ yarn dev
|
|
|
|
|
|
เปิดเบราว์เซอร์ที่ http://localhost:3000 เพื่อดูหน้าเว็บ
|
|
|
|
|
|
|
|
|
|
|
|
3. สรุปการทำงานของแต่ละส่วน
|
|
|
|
|
|
โค้ดหลักแบ่งออกเป็นหลาย Section ตามโครงสร้างเว็บ ดังนี้:
|
|
|
|
|
|
|
|
|
|
|
|
3.1Top Announcement Bar
|
|
|
|
|
|
แถบสีเขียวเข้มด้านบน (เช่น #0e3a24)
|
|
|
|
|
|
มีข้อความประกาศ เช่น "SupportNinja is hiring! …" พร้อมลิงก์สมัครงาน
|
|
|
|
|
|
|
|
|
|
|
|
3.2Navbar (Sticky) + Dropdown & Hamburger
|
|
|
|
|
|
ติดด้านบน (sticky top-0)
|
|
|
|
|
|
มีโลโก้ซ้ายมือ, เมนูขวามือ (Desktop), ปุ่ม Get Started
|
|
|
|
|
|
Dropdown Menu: เมื่อ Hover เมนูอย่าง Solutions, Industries, About จะมีเมนูย่อยแสดงขึ้นมา (ใช้ useState แยกแต่ละเมนู)
|
|
|
|
|
|
Hamburger Menu (Mobile): เมื่อจอเล็ก (< md) จะแทนที่เมนูด้วยปุ่ม Hamburger (เปิด/ปิดเมนูด้วย isMobileMenuOpen)
|
|
|
|
|
|
ภายในเมนู Mobile มีปุ่ม Get Started อีกอันด้านล่าง
|
|
|
|
|
|
|
|
|
|
|
|
3.3Hero Section
|
|
|
|
|
|
พื้นหลังสีครีม (เช่น #f7e1d2)
|
|
|
|
|
|
ข้อความสั้น ๆ และหัวข้อใหญ่ เช่น "Outsourcing worth talking about"
|
|
|
|
|
|
มีเส้น <hr> คั่น
|
|
|
|
|
|
|
|
|
|
|
|
3.4Outsourcing Options Section (Checkbox Grid)
|
|
|
|
|
|
ยังใช้พื้นหลังสีครีม (#f7e1d2)
|
|
|
|
|
|
หัวข้อ "Which outsourcing solutions are you looking for?"
|
|
|
|
|
|
มี Grid 6 ช่อง แต่ละช่องมีรูป (เช่น image2.png), ชื่อบริการ, และ Checkbox ที่มุมขวาบน
|
|
|
|
|
|
เมื่อคลิกช่องใด จะสลับสถานะ Checkbox และเปลี่ยนพื้นหลังของช่อง (ใช้ useState ชื่อ selected)
|
|
|
|
|
|
ด้านล่างมีปุ่ม Get Started สีแดง
|
|
|
|
|
|
|
|
|
|
|
|
3.5Section เพิ่มเติม (1 → 6)
|
|
|
|
|
|
แต่ละ Section มีดีไซน์แตกต่างกัน เช่น พื้นหลังสีต่าง ๆ, รูปซ้าย-ข้อความขวา หรือข้อความซ้าย-รูปขวา
|
|
|
|
|
|
Section 1: ใส่ Container สีเทา (#bfc1b9) ข้างใน พร้อมรูป midjourney.png
|
|
|
|
|
|
Section 2, 3, 4, 5: จัดเป็น 2 คอลัมน์ หรือ Grid 3 คอลัมน์ (เช่นบริการต่าง ๆ)
|
|
|
|
|
|
Section 6: "We’re better together. Start building your dream team." พร้อมรูป image8.png ทางขวา, ปุ่ม Get Started สีแดง
|
|
|
|
|
|
|
|
|
|
|
|
3.6Footer
|
|
|
|
|
|
พื้นหลังสีเทาอ่อน (#bfc1b9)
|
|
|
|
|
|
มีโลโก้, คอลัมน์เมนูต่าง ๆ (Solutions, Industries, Resources, Follow, Company)
|
|
|
|
|
|
ปุ่ม Get started สีแดงอยู่ด้านขวา
|
|
|
|
|
|
ด้านล่างมีข้อความลิขสิทธิ์และลิงก์ (Privacy Policy, Security Policy, Terms of Use)
|
|
|
|
|
|
ออกแบบให้ Responsive เมื่อจอเล็กจะเรียงกันเป็นคอลัมน์
|
|
|
|
|
|
|
|
|
|
|
|
4. การใช้ State และฟังก์ชันต่าง ๆ
|
|
|
|
|
|
4.1State สำหรับ Dropdown
|
|
|
|
|
|
isSolutionsOpen, isIndustriesOpen, isAboutOpen: ควบคุมการเปิด/ปิดเมนูย่อยใน Desktop
|
|
|
|
|
|
ทำงานด้วยการ onMouseEnter → setState(true), onMouseLeave → setState(false)
|
|
|
|
|
|
State สำหรับ Mobile Menu
|
|
|
|
|
|
|
|
|
|
|
|
4.2isMobileMenuOpen: เมื่อคลิกปุ่ม Hamburger จะสลับ true/false
|
|
|
|
|
|
ถ้า true จะแสดงเมนูในรูปแบบลิสต์ลงมา
|
|
|
|
|
|
|
|
|
|
|
|
4.3State สำหรับ Checkbox Grid
|
|
|
|
|
|
selected: string[]: เก็บ ID ของ Option ที่ถูกเลือก
|
|
|
|
|
|
ฟังก์ชัน toggleSelection(id: string): เช็คว่า ID นั้นอยู่ใน selected ไหม → ถ้ามีก็ถอดออก, ถ้าไม่มีให้เพิ่มเข้า
|
|
|
|
|
|
|
|
|
|
|
|
4.4โครงสร้างเมนู
|
|
|
|
|
|
ใน Desktop, เมนูหลักจะซ่อนบนจอเล็ก (ใช้ md:flex / hidden)
|
|
|
|
|
|
ใน Mobile, เมนูหลักจะแสดงเมื่อ isMobileMenuOpen === true
|
|
|
|
|
|
|
|
|
|
|
|
5. เคล็ดลับการปรับแต่ง
|
|
|
|
|
|
5.1เปลี่ยนสี / ข้อความ:
|
|
|
|
|
|
ใน Class Tailwind เช่น bg-[#0e3a24], text-[#f7e1d2], สามารถเปลี่ยนเป็นโทนสีอื่น ๆ ได้
|
|
|
|
|
|
ข้อความต่าง ๆ เช่น H1, H2, หรือ Paragraph แก้ได้ตามต้องการ
|
|
|
|
|
|
|
|
|
|
|
|
5.2เปลี่ยนรูปภาพ:
|
|
|
|
|
|
ตรวจสอบว่ารูปอยู่ใน /public/assets/ แล้วเรียกใช้ด้วยเส้นทาง /assets/xxxx.png
|
|
|
|
|
|
ขนาดรูป (width, height) สามารถปรับตามดีไซน์
|
|
|
|
|
|
|
|
|
|
|
|
5.3Responsive เพิ่มเติม:
|
|
|
|
|
|
Tailwind มี breakpoint sm:, md:, lg:, xl: ถ้าต้องการจัด layout หรือขนาดตัวอักษรเฉพาะจอใหญ่/เล็ก
|
|
|
|
|
|
|
|
|
|
|
|
5.4แยกเป็นคอมโพเนนต์:
|
|
|
|
|
|
ถ้าไฟล์ Navbar.tsx ใหญ่มาก สามารถแยกแต่ละ Section ไปเป็นไฟล์คอมโพเนนต์ย่อย แล้ว import มาใช้เพื่อความเป็นระเบียบ
|
|
|
|
|
|
|
|
|
|
|
|
5.5Production Build:
|
|
|
|
|
|
เมื่อพร้อม Deploy, ให้ใช้คำสั่ง npm run build หรือ yarn build
|
|
|
|
|
|
จากนั้น npm run start หรือ yarn start เพื่อรัน Production Mode
|
|
|
|
|
|
|
|
|
|
|
|
6. วิธีนำไปใช้งานจริง
|
|
|
|
|
|
6.1คัดลอกโค้ด นี้ไปใส่ในไฟล์คอมโพเนนต์ เช่น page.tsx (หรือชื่อไฟล์ที่ต้องการ)
|
|
|
|
|
|
6.2รัน npm run dev
|
|
|
|
|
|
6.3เปิด http://localhost:3000
|
|
|
|
|
|
ดูว่า Navbar, Hero, Sections และ Footer แสดงผลครบถ้วนหรือไม่
|
|
|
|
|
|
|
|
|
|
|
|
7. สรุป
|
|
|
|
|
|
1.โค้ดนี้เป็นตัวอย่างหน้าเว็บ Next.js 15 + Tailwind CSS ที่มีฟีเจอร์หลัก:
|
|
|
|
|
|
-Navbar Sticky พร้อม Dropdown (Desktop) และ Hamburger (Mobile)
|
|
|
|
|
|
-Hero Section สีครีม
|
|
|
|
|
|
-Grid Checkbox เลือกบริการต่าง ๆ
|
|
|
|
|
|
-Sections หลายส่วน (ใส่รูป + ข้อความ)
|
|
|
|
|
|
-Footer ที่แบ่งคอลัมน์ลิงก์ และมีปุ่ม Get Started สีแดง
|
|
|
|
|
|
|
|
|
|
|
|
###ขอบคุณครับ :)
|
