เว็บไซต์ขายเสื้อแบรนด์เนมแท้ ที่ออกแบบมาเพื่อ SEO และ Performance สูงสุด
- ✅ Next.js 16 - App Router + Server Components
- ✅ Prisma ORM - MySQL Database with type-safety
- ✅ NextAuth.js - Authentication (Google, Facebook)
- ✅ Tailwind CSS 4 - Modern utility-first CSS
- ✅ SEO Optimized - Metadata, Open Graph, Structured Data
- ✅ Responsive Design - Mobile-first approach
- ✅ TypeScript - Full type safety
git clone <repository-url>
cd sertae-com
npm installcopy .env.example .envแก้ไข DATABASE_URL ในไฟล์ .env:
DATABASE_URL="mysql://root:password@localhost:3306/sertae_com"# สร้าง database (ถ้ายังไม่มี)
mysql -u root -p -e "CREATE DATABASE sertae_com;"
# รัน migrations
npm run prisma:migrate
# เพิ่มข้อมูลตัวอย่าง
npm run prisma:seed📚 คำแนะนำละเอียด: อ่านที่ SETUP_DATABASE.md
npm run devเปิด http://localhost:3000 ในเบราว์เซอร์
sertae-com/
├── prisma/
│ ├── schema.prisma # Database schema
│ ├── seed.ts # Seed data script
│ └── migrations/ # Migration files
├── public/
│ ├── og-image.svg # Open Graph image (TODO: เปลี่ยนเป็น .jpg)
│ └── images/ # Product & category images
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Homepage
│ │ └── metadata.ts # SEO metadata
│ ├── components/
│ │ ├── home/ # Homepage components
│ │ ├── layout/ # Layout components
│ │ ├── shop/ # Shop components
│ │ └── ui/ # Reusable UI components
│ └── lib/
│ └── icons.tsx # SVG icon components
├── SEO_IMPROVEMENTS.md # SEO checklist & guide
├── SETUP_DATABASE.md # Database setup guide
└── README.md # This file
- User - ผู้ใช้งาน (NextAuth.js)
- Post - บทความ Blog (สำหรับ SEO)
- ProductCategory - หมวดหมู่สินค้า (Streetwear, Sportswear, Luxury)
- Brand - แบรนด์ (Nike, Adidas, Supreme, etc.)
- Product - สินค้า (รายละเอียด, ราคา, SEO fields)
npm run prisma:studio# Development
npm run dev # Start dev server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
# Database
npm run prisma:migrate # Run database migrations
npm run prisma:seed # Seed database with sample data
npm run prisma:studio # Open Prisma Studioดูคำแนะนำครบถ้วนที่ SEO_IMPROVEMENTS.md
- เปลี่ยน
og-image.svg→og-image.jpg(1200x630px) - แทนรูป Placeholder ทั้งหมดด้วยรูปจริง
- เชื่อมต่อ Frontend กับ Database
- รัน Lighthouse (Score > 90)
- ทดสอบ Open Graph ที่ OpenGraph.xyz
ดูคำแนะนำที่ public/images/README.md
- OG Image: 1200 x 630px
- Hero: 1920 x 1080px
- Products: 800 x 800px
- Categories: 800 x 600px
สร้างไฟล์ .env จาก .env.example:
# Database
DATABASE_URL="mysql://root:password@localhost:3306/sertae_com"
# NextAuth (ถ้าใช้)
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"
# OAuth Providers
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""- Push code ไป GitHub
- Import project ใน Vercel
- เพิ่ม Environment Variables
- Deploy!
- ใช้ PlanetScale (แนะนำ)
- หรือ MySQL บน VPS
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License.
สร้างด้วย: GitHub Copilot
วันที่: 27 ตุลาคม 2025
หากพบปัญหา กรุณาเปิด Issue ใน GitHub Repository