115 lines
No EOL
9.2 KiB
Markdown
115 lines
No EOL
9.2 KiB
Markdown
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 สีแดง
|
||
|
||
###ขอบคุณครับ :) |