Challenge Day 2: Next.js → GitHub → Vercel

At a glance

Starter pack

Component Shop

ร้านขายชิ้นส่วนเว็บ (ฟรี) มี Navbar, Hero, About, Projects, Skills และ Footer หลายแบบ แต่ละชิ้นมี Live Preview, โค้ดให้ copy และตาราง props บอกว่าเปลี่ยนอะไรได้บ้าง

Getting started

1. แตกไฟล์และรันบนเครื่อง

   แตก zip แล้วเปิดโฟลเดอร์ my-portfolio ใน IDE เปิด Terminal แล้วรัน

   npm install
   npm run dev

   Copy

   เปิด http://localhost:3000 ต้องเห็นหน้า Hello, I'm ___

2. เลือกชิ้นส่วนจาก Shop

   เปิด Component Shop เลือก Navbar, Hero, Projects และ Footer อย่างละ 1 แบบ กด View details เพื่อดูตัวอย่างบนจอมือถือ

3. Copy แล้ววางเป็นไฟล์

   กด Copy code สร้างไฟล์ใน components/ ตั้งชื่อตาม component เช่น components/HeroMinimal.tsx แล้ววางทั้งหมด ทำแบบนี้ทุกชิ้น

4. ต่อชิ้นส่วนใน app/page.tsx

   ลบของเดิมใน app/page.tsx แล้ว import ชิ้นที่เลือกมาเรียงจากบนลงล่าง

   import NavbarMinimal from "@/components/NavbarMinimal";
   import HeroMinimal from "@/components/HeroMinimal";
   import ProjectGrid from "@/components/ProjectGrid";
   import SimpleFooter from "@/components/SimpleFooter";
   
   export default function Home() {
     return (
       <>
         <NavbarMinimal />
         <main>
           <HeroMinimal />
           <ProjectGrid />
         </main>
         <SimpleFooter />
       </>
     );
   }

   Copy

5. ใส่ข้อมูลของคุณผ่าน props

   ย้ายเนื้อหาจาก Day 1 มาใส่เป็น props ดูชื่อ props ได้ในหน้ารายละเอียดของแต่ละชิ้น วางรูปไว้ใน public/ แล้วส่งเป็น image="/me.jpg"

   <HeroMinimal
     name="Mint"
     role="Grade 11 student who loves design"
     bio="I make posters and websites for my school clubs."
     image="/me.jpg"
   />

   Copy

6. เพิ่มหน้า About

   สร้าง app/about/page.tsx ใช้ AboutCard หรือ AboutSplit จาก Shop แล้วเพิ่ม { label: "About", href: "/about" } ใน links ของ Navbar

7. เช็กว่า build ผ่าน

   npm run build

   Copy

   ถ้ามี error ให้แก้ให้ผ่านก่อน Vercel จะ build แบบเดียวกันนี้

8. สร้าง Git repo และ push ขึ้น GitHub

   สร้าง repo ว่างชื่อ my-portfolio ที่ github.com/new (ไม่ต้องติ๊ก README) แล้วรัน

   git init
   git add .
   git commit -m "feat: my portfolio"
   git branch -M main
   git remote add origin https://github.com/<username>/my-portfolio.git
   git push -u origin main

   Copy

9. Deploy ขึ้น Vercel

   ไปที่ vercel.com/new → Import repo my-portfolio → Deploy รอประมาณ 1 นาที

10. แก้แล้ว push อีกครั้ง

    เปลี่ยนสีหรือข้อความสักจุด แล้ว git add . → git commit → git push ดูว่าเว็บบน Vercel อัปเดตเองภายใน 1 นาที

Specification

• หน้าแรกประกอบจาก component ใน Shop อย่างน้อย 4 ชิ้น: Navbar, Hero, Projects และ Footer
• ทุกชิ้นแสดงข้อมูลของคุณผ่าน props ไม่เหลือข้อมูลตัวอย่าง
• มีรูปของคุณหรือรูปผลงานอย่างน้อย 1 รูป จากโฟลเดอร์ public/
• อย่างน้อย 2 หน้า: / และ /about ที่ลิงก์หากันได้
• npm run build ผ่าน
• โค้ดอยู่บน GitHub repo ของคุณ (public) และเว็บเปิดได้จากลิงก์ .vercel.app

Hints

• Module not found: ชื่อไฟล์ต้องตรงกับใน import ทุกตัวอักษร รวมตัวพิมพ์ใหญ่เล็ก (HeroMinimal.tsx ไม่ใช่ heroMinimal.tsx)
• error เรื่อง useState หรือ Client Component: เช็กว่าบรรทัดแรกของไฟล์ยังมี "use client" อยู่
• รูปไม่ขึ้น: ไฟล์ต้องอยู่ใน public/ แล้วเรียกเป็น "/me.jpg" (มี / นำหน้า ไม่มีคำว่า public)
• ใช้ชิ้นเดียวกันซ้ำได้ เช่น ProjectList 2 ชุด ชุดหนึ่งเป็นงานเรียน อีกชุดเป็นงานอดิเรก
• Vercel build ไม่ผ่านแต่บนเครื่องผ่าน: ดู log ในหน้า Deployments มักเป็นชื่อไฟล์ตัวพิมพ์ไม่ตรง
• git push ถูกปฏิเสธ: repo บน GitHub อาจมี README อยู่แล้ว ให้ git pull origin main --allow-unrelated-histories ก่อน

How to submit

• ลิงก์เว็บ .vercel.app
• ลิงก์ GitHub repo

Going further

• แก้โค้ดใน component ให้เป็นแบบของคุณ เช่นเปลี่ยน layout หรือเพิ่ม prop ใหม่
• ลอง shadcn/ui ไลบรารีที่ใช้บ่อยที่สุดในงานจริง: npx shadcn@latest init แล้ว npx shadcn@latest add button
• เพิ่ม animation จาก Magic UI หรือ React Bits (บางตัวต้องลงแพ็กเกจเพิ่ม)
• ทำหน้า /projects/[slug] แสดงรายละเอียดแต่ละโปรเจกต์
• ต่อโดเมนของตัวเองใน Vercel

Next steps

• Challenge Day 3: สร้าง full-stack web