การพัฒนา Personal Website ด้วย Next.js 15 + Tailwind CSS: จาก Zero to Production
จริงๆแล้วเว็บ aoddy.com เปิดมานานมาก ซื้อโดเมนครั้งแรกน่าจะปี 2007 หลังจากนั้นก็ Bloging มาเรื่อยๆ จนหลังๆ นานๆ Update ที สุดท้ายเลยคิดอยากจะ ย้ายจาก Wordpress มาเป็น Web Framework ซักอัน แต่ด้วยความที่เราก็ไม่ได้ Web Dev จ๋าขนาดนั้น ก็เลยไม่ได้ย้ายซักที จนกระทั่งการมาของ AI ทำให้ย้ายได้ง่ายและเร็วขึ้นมากๆๆ บทความนี้เลยอยากจะมา Share ว่าการพัฒนาและการย้าย มีขั้นตอนอะไรบ้าง
🎯 Project Overview และเป้าหมาย
เป้าหมายหลักของการสร้าง website นี้คือ:
- Personal Branding : สร้าง online presence ที่เป็นตัวตนของตัวเอง
- Blog Platform : เขียน blog เกี่ยวกับ programming และ technology
- Portfolio Showcase : แสดงผลงานและทักษะการเขียนโปรแกรม
- Modern Tech Stack : ใช้เทคโนโลยีล่าสุดเพื่อเรียนรู้และทดลอง
- 0 Cost: ค่าใช้จ่ายต้องใกล้ 0 บาท (จ่ายแค่ค่าโดเมนปีละประมาณ 500 บาทเท่านั้น)
- Content : จะเก็บอยู่บน Github แล้วสร้าง Service ไปอ่านข้อมูล Content มาแสดง
- AI Tool : ต้องการใช้ Gemini Code Asssist บน VS Code / Qoder IDE
- Dev Environment : WSL Ubuntu บน Windows + Gitlab
- Hosting : Vercel Free Tier
🤖 AI-Powered Development with Qoder/VScode with Gemini
การใช้ Qoder IDE เป็น Development Partner
ก่อนที่จะเริ่มเขียนโค้ด สิ่งแรกที่ทำคือการใช้ Qoder AI ช่วยในการวางแผนและสร้าง project structure ซึ่งกลายเป็นจุดเปลี่ยนที่สำคัญในการพัฒนา ผมให้มันสร้าง REQUIREMENTS ให้ พร้อมทั้งให้สร้าง Agent มาช่วยพัฒนาเว็บนี้ถึง 3 คน (จริงๆคนเดียวก็เอาอยู่ แต่อยากลอง QUEST ใน Qoder)
- Agent 1: Alex - Full-Stack Developer (Lead)
- Agent 2: Morgan - DevOps & SEO Specialist
- Agent 3: Jordan - Content & Database Integration Specialist
สร้าง REQUIREMENTS.md ด้วย AI
พอเริ่มคุยกับ AI สิ่งแรกที่ผมให้มันทำคือ ให้มันสร้าง REQUIREMENTS.md ให้ผมทันที
# Personal Blog Requirements Document - www.aoddy.com
## Project Overview
Personal blog website for www.aoddy.com with zero operational costs (excluding domain registration).
## Technical Requirements
### 1. Cost Structure - $0 Operating Cost ✅
- **Domain**: Already purchased (www.aoddy.com)
- **Hosting**: Free tier services only
- **Database**: Free tier or file-based storage
- **CI/CD**: Free tier services
- **Total Monthly Cost**: $0
### 2. Hosting Platform Recommendation
**Primary Choice: Vercel**
- **Free Tier**: 100GB bandwidth, unlimited deployments
- **Benefits**:
- Automatic HTTPS
- Global CDN
- Git integration
- Serverless functions
- Built-in analytics
- Custom domain support
- **Limitations**: Commercial usage restrictions (personal blog is fine)
**Alternative Options**:
- **Netlify**: Similar features, 100GB bandwidth
- **GitHub Pages**: Basic static hosting
- **Railway**: Good for full-stack apps with database
### 3. Database Solutions (Free Tier)
**Recommended: Hybrid Approach**
- **Primary**: File-based content (Markdown + Git)
- **Dynamic Data**: Serverless database for comments/analytics
**Options**:
1. **PlanetScale** (MySQL): 1GB storage, 1 billion row reads/month
2. **Supabase** (PostgreSQL): 500MB storage, 2GB bandwidth
3. **MongoDB Atlas**: 512MB storage
4. **Vercel KV** (Redis): 30,000 commands/month
5. **File-based**: Markdown files in Git repository (recommended for blog content)
### 4. CI/CD Pipeline
**GitHub Actions** (Free for public repositories)
- Automatic deployment on push to main branch
- Build optimization
- Content validation
- SEO checks
- Image optimization
### 5. Web Framework Recommendation
**Next.js 14+ (App Router)**
- **Why Next.js**:
- React-based with excellent SEO
- Static Site Generation (SSG)
- Server-Side Rendering (SSR)
- Built-in optimization
- Perfect Vercel integration
- Large community and ecosystem
**Alternative Frameworks**:
- **Astro**: Excellent for content-heavy sites, component-agnostic
- **Nuxt.js**: Vue-based equivalent to Next.js
- **SvelteKit**: Lightweight and fast
### 6. SEO Requirements
**Technical SEO Features**:
- Static site generation for fast loading
- Meta tags and Open Graph support
- XML sitemap generation
- robots.txt
- Structured data (JSON-LD)
- Mobile-responsive design
- Core Web Vitals optimization
- Image optimization and lazy loading
**Content SEO Features**:
- Blog post metadata (title, description, tags)
- URL slug optimization
- Internal linking structure
- RSS feed generation
- Social media integration
## Recommended Technology Stack
### Frontend
- **Framework**: Next.js 14+ (App Router)
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui or Headless UI
- **Typography**: next/font with Google Fonts
- **Icons**: Lucide React or Heroicons
- **Color Palette**: ["1e81b0","eeeee4","e28743","eab676","76b5c5","21130d","873e23","abdbe3","063970","154c79"]
### Content Management
- **Content**: Markdown files with frontmatter
- **Processing**: MDX for rich content
- **Storage**: Git repository
- **CMS Option**: Decap CMS (formerly Netlify CMS) for non-technical editing
### Database & Backend
- **Blog Content**: File-based (Markdown in Git)
- **Dynamic Features**: Serverless functions on Vercel
- **Database**: Supabase (for comments, analytics, contact forms)
- **Authentication**: NextAuth.js (if needed for admin features)
### Deployment & CI/CD
- **Hosting**: Vercel
- **Repository**: GitHub
- **CI/CD**: GitHub Actions + Vercel integration
- **Domain**: Custom domain (www.aoddy.com)
### Analytics & Monitoring
- **Analytics**: Vercel Analytics (free) + Google Analytics 4
- **Performance**: Vercel Speed Insights
- **Error Tracking**: Sentry (free tier)
- **Uptime**: UptimeRobot (free tier)
### SEO & Performance Tools
- **Sitemap**: next-sitemap
- **RSS**: Built-in RSS generation
- **Image Optimization**: Next.js Image component
- **Bundle Analysis**: @next/bundle-analyzer
- **SEO**: next-seo package
## Project Structure
aoddy.com/
├── 📂 src/
│ ├── 📂 app/ # Next.js App Router pages
│ │ ├── 📄 page.tsx # Homepage with hero section
│ │ ├── 📄 layout.tsx # Root layout component
│ │ ├── 📂 blog/ # Blog pages
│ │ ├── 📂 about/ # About page
│ │ └── 📂 contact/ # Contact page
│ ├── 📂 components/ # Reusable React components
│ │ └── 📄 Logo.tsx # Optimized logo component
│ └── 📂 lib/ # Utility functions
│ └── 📄 blog.ts # Blog post utilities
├── 📂 content/
│ └── 📂 blog/ # Blog posts (Markdown)
├── 📂 public/
│ ├── 📂 images/ # Static images
│ ├── 📄 favicon.ico # Site favicon
│ └── 📄 logo_v3_darkblue.png # Main logo
├── 📂 data/
│ └── 📄 views.json # View tracking data
├── 📄 tailwind.config.ts # Tailwind CSS configuration
├── 📄 next.config.js # Next.js configuration
└── 📄 package.json # Project dependencies
ประโยชน์ของการใช้ AI ในการพัฒนา
นอกจาก AI มันฉลากเรื่อง Code แล้ว สิ่งที่มันเก่ง ก็คือ เรื่อง การสร้าง Code ที่มีคุณภาพ แล้วก็แนะนำการวางโครงสร้าง Code ให้เราได้ดีอีกด้วย ด้านล่างคือ จุดเด่น
1. Rapid Prototyping
- สร้าง component structure ได้รวดเร็ว
- Generate boilerplate code ที่มีคุณภาพ
- ลดเวลาในการ setup project เหลือเพียง 30%
2. Code Quality & Best Practices
Code ที่ AI มันปั่นมาให้ มันจะออกแบบมาให้เป็นอย่างดี อย่างด้านล่างนี้เป็น Interface ที่มันช่วยออกแบบ ให้กับ API Endpoint ของเว็บผม (ตอนเริ่มมี 1 Endpoint)
// Qoder แนะนำ TypeScript interfaces ที่ comprehensive
export interface BlogPost {
slug: string;
title: string;
excerpt: string;
date: string;
readTime: string;
tags: string[];
featured: boolean;
author: string;
content?: string;
heroImage?: string; // AI suggested this for better UX
}
3. Problem-Solving Assistance
- วิเคราะห์ errors และเสนอแนะวิธีแก้ไข
- ช่วยหา root cause ของปัญหาได้เร็วขึ้น
- แนะนำ alternative approaches ที่ดีกว่า
4. Documentation & Comments
เรื่องเอกสารนี่บอกเลยว่า AI ทำได้เรียบร้อย และ อ่านง่าย ยิ่งเวลาพวก ประกาศฟังก์ชั่น อะไรพวกนี้ เค้าจะทำ Document ให้เราอ่านได้เป็นอย่างดี
// AI-generated documentation
/**
* Extracts the first image from markdown content for hero backgrounds
* @param content - Raw markdown content string
* @returns Image URL or undefined if no image found
*/
function extractHeroImage(content: string): string | undefined {
const imageRegex = /!\[.*?\]\((.*?)(?:\s+".*?")?\)/;
const match = content.match(imageRegex);
return match ? match[1] : undefined;
}
AI-Assisted Development Workflow
ดังนั้น สรุปแล้ว AI Assisted Development นั้นมาช่วยผม ตั้งแต่ ต้นน้ำยันปลายน้ำเลยก็ว่าได้
- Planning Phase: Qoder ช่วยวิเคราะห์ requirements และแนะนำ architecture
- Implementation: Generate starter code และ suggest improvements
- Debugging: วิเคราะห์ error messages และเสนอวิธีแก้ไข
- Optimization: แนะนำ performance improvements และ best practices
- Documentation: สร้าง README, comments, และ documentation
ตัวอย่างการช่วยแก้ปัญหาจริง
ปัญหา: ESLint errors ใน production build
Error: `'` can be escaped with `'`, `‘`, `'`, `’`
Qoder Analysis:
- ชี้ให้เห็นว่าเป็นปัญหา react/no-unescaped-entities
- แนะนำการใช้ HTML entities แทน straight quotes
- ให้วิธีการแก้ไขแบบ systematic ทั้ง codebase
ผลลัพธ์: แก้ไขได้ครบทุกไฟล์ และ build ผ่าน successfully
ROI ของการใช้ AI ในการพัฒนา
เวลาที่ประหยัดได้:
- Project Setup: 70% faster (จาก 2 วัน เหลือ 0.6 วัน)
- Debugging: 50% faster (เพราะได้ hints ที่แม่นยำ)
- Documentation: 80% faster (auto-generate จาก code)
- Code Review: 60% faster (AI pre-check quality)
คุณภาพที่ดีขึ้น:
- Consistent Code Style: AI enforce best practices
- Better Error Handling: Comprehensive error scenarios
- Documentation Coverage: ครบถ้วนและเป็นปัจจุบัน
- Performance Optimization: Suggestions for improvements
AI Development Best Practices
- Clear Communication: อธิบาย context และ requirements ให้ชัดเจน
- Iterative Refinement: ใช้ feedback loop เพื่อปรับปรุง output
- Human Oversight: Review และ test ทุก AI-generated code
- Learn from AI: ศึกษาเหตุผลเบื้องหลัง suggestions
- Combine Strengths: ใช้ AI ช่วยงานที่เหมาะสม, human handle creative decisions
🎉 สิ่งที่ได้เรียนรู้
Technical Learnings
- Next.js 15 App Router: Architecture ใหม่ที่ powerful กว่าเดิม
- Tailwind CSS: Utility-first approach ที่เร็วและยืดหยุ่น
- Typography: การจัดการ multi-language fonts อย่างถูกต้อง
- Performance: Image optimization และ bundle size management
- Deployment: Modern deployment workflow ด้วย Vercel
- AI-Powered Development: การใช้ Qoder เพิ่มประสิทธิภาพการเขียนโค้ด
Development Workflow
- AI-Assisted Planning: ใช้ Qoder วางแผน architecture และ design system ก่อน
- Incremental Development: พัฒนาทีละ feature, test ให้ผ่านก่อนต่อ
- Typography First: Setup fonts และ typography ตั้งแต่เริ่มต้น
- Content Strategy: วางแผน content management ให้ชัดเจน
- Production Ready: เตรียม deployment configuration ตั้งแต่เริ่มต้น
- AI Quality Assurance: ใช้ Qoder review code quality และ suggest improvements
🔮 Next Steps และ Future Enhancements
Short-term Improvements
- SEO Optimization: Structured data และ sitemap
- Performance: Code splitting และ lazy loading
- Analytics: เพิ่ม visitor tracking
- RSS Feed: สำหรับ blog subscribers
Long-term Vision
- Multi-language Support: English และ Thai content
- Interactive Components: Dynamic demos และ code playgrounds
- Advanced Search: Full-text search ใน blog posts
- Comment System: Community engagement features
✨ สรุป
การสร้าง personal website เป็นการเดินทางที่น่าสนใจมาก จากที่เริ่มต้นด้วย idea ง่ายๆ ก็กลายเป็น modern web application ที่มีความสามารถครบครัน
Key Takeaways:
- Modern Tech Stack ช่วยให้การพัฒนาเร็วขึ้นและ maintainable
- Design System ที่ดีทำให้ UI/UX consistent และ professional
- Thai Typography ต้องใส่ใจในรายละเอียดเพื่อให้อ่านง่าย
- Performance Optimization สำคัญสำหรับ user experience
- Deployment Automation ช่วยลดความผิดพลาดและเพิ่มความเร็ว
- AI-Powered Development เพิ่มประสิทธิภาพและคุณภาพอย่างมาก
ตัว website ตอนนี้พร้อมใช้งานแล้วบน aoddy.com และจะมี blog posts ใหม่ๆ เรื่อย ๆ เกี่ยวกับการพัฒนา software และเทคโนโลยีต่าง ๆ
หวังว่าประสบการณ์นี้จะเป็นประโยชน์สำหรับคนที่กำลังคิดจะสร้าง personal website เหมือนกัน! 🚀
Resources:
- Next.js Documentation
- Tailwind CSS
- Vercel Deployment Guide
- Google Fonts - Noto Sans Thai
- Qoder AI IDE - AI-powered development assistant
