## Apa Itu Vercel? ### Analogi Sederhana: Gojek/Grab untuk Website Bayangkan Vercel kayak **Gojek/Grab untuk website kamu**: 1. **Push code = Pesan Gojek** → Langsung dijemput dan delivered ke seluruh dunia 2. **Auto-detect alamat (Framework Detection)** → Tau sendiri kamu pakai Next.js, React, atau Vue 3. **Driver terdekat (Global CDN)** → User di Jakarta atau New York, dapat dari server terdekat 4. **Track real-time (Deployment Status)** → Pantau progress build & deploy secara live 5. **Preview sebelum sampai (Preview URL)** → Cek dulu sebelum release ke production 6. **Rating & feedback (Analytics)** → Monitor performa & user experience 7. **Gratis buat personal (Free Tier)** → Gak bayar sepeserpun buat personal projects Gak perlu mikir server, gak perlu setup kompleks. **Push, deploy, done.** ## Kenapa Vercel? Vercel adalah platform deploy yang bikin hidup developer lebih gampang. Dibuat oleh kreator Next.js, tapi mendukung semua framework (React, Vue, Svelte, Angular, dll). ### Keunggulan yang Bikin Developer Jatuh Cinta **1. Deploy Tanpa Konfigurasi Ribet** - Push ke Git → Otomatis deploy - Framework terdeteksi otomatis - Pengaturan build sudah dikonfigurasi sendiri - Gak perlu setup manual **Perbandingan:** ```bash # Cara Tradisional (30+ langkah) 1. ssh ke server 2. git pull 3. npm install 4. npm run build 5. restart nginx 6. cek logs 7. berdoa semoga jalan 🙏 # Vercel (1 langkah) 1. git push KELAR! ``` **2. Jaringan Server Global** - Website kamu cepet di mana aja - 100+ lokasi server di seluruh dunia - File statis otomatis di-cache - Otomatis diarahkan ke server terdekat **Dampaknya:** - User Jakarta: 20ms latensi - User New York: 25ms latensi - User Sydney: 30ms latensi **Pengalaman cepat & konsisten di mana pun!** **3. Pratinjau Deployment Otomatis** - Setiap Pull Request dapat URL pratinjau unik - Tes dulu sebelum di-merge - Bisa dibagikan ke desainer/stakeholder - Gak ganggu production **Alur Kerja:** ``` 1. Buat PR → Vercel otomatis deploy pratinjau 2. Desainer review di URL pratinjau 3. Feedback & iterasi 4. Approve & merge → Otomatis deploy ke production ``` **4. Jaringan Edge (Server Terdekat)** - Deploy fungsi ke lokasi edge - Jalankan code lebih dekat dengan user - Latensi lebih rendah, respon lebih cepat - Hemat biaya **5. Paket Gratis yang Murah Hati** - Deploy statis unlimited (gak terbatas) - 100 GB bandwidth per bulan - HTTPS otomatis - **Cocok banget buat:** - Website portfolio - Proyek sampingan - Proyek open source - Belajar & eksperimen ### Perbandingan Nyata: Vercel vs Hosting Tradisional | Fitur | VPS Tradisional | Vercel Gratis | |---------|----------------|-------------| | Waktu setup | 2-4 jam | 2 menit | | Biaya bulanan | $5-20 | $0 | | Sertifikat SSL | Manual | Otomatis | | CDN Global | Tambah $10-50/bln | Sudah termasuk | | Waktu deploy | 5-10 menit | 30 detik | | Rollback | Manual | 1 klik | | Pratinjau deployment | Setup manual | Otomatis | ## Deployment Pertama ### Lewat Dashboard 1. Masuk ke [vercel.com](https://vercel.com) 2. Import repository Git (GitHub, GitLab, Bitbucket) 3. Konfigurasi project (framework terdeteksi otomatis) 4. Klik Deploy Itu aja. Dalam ~2 menit website kamu udah live. ### Lewat CLI Install Vercel CLI: ```bash npm install -g vercel ``` Deploy: ```bash vercel # Deploy pertama: Jawab pertanyaan setup # Deploy selanjutnya: Tinggal jalankan vercel ``` Deploy ke production: ```bash vercel --prod ``` ## Konfigurasi Project Buat file `vercel.json` di root project: ```json { "buildCommand": "npm run build", "outputDirectory": "dist", "framework": "vite", "installCommand": "npm install" } ``` Tapi kebanyakan, Vercel otomatis mendeteksi framework dan mengkonfigurasi sendiri. ## Variabel Environment ### Tambah Lewat Dashboard 1. Project Settings → Environment Variables 2. Tambah key-value pairs 3. Pilih scope: Production, Preview, Development ### Akses di Code ```typescript // Next.js - Public variables (exposed to browser) const apiUrl = process.env.NEXT_PUBLIC_API_URL // Next.js - Server-only variables const secretKey = process.env.SECRET_KEY // Vite - Public variables const apiUrl = import.meta.env.VITE_API_URL ``` ### Development Lokal Buat file `.env.local`: ```bash NEXT_PUBLIC_API_URL=http://localhost:3000/api DATABASE_URL=postgres://localhost:5432/mydb SECRET_KEY=local-dev-secret ``` Jangan commit `.env.local` ke Git. Tambahkan ke `.gitignore`. ## Domain Kustom ### Tambah Domain 1. Project Settings → Domains 2. Tambah domain kamu 3. Konfigurasi DNS ### Konfigurasi DNS Vercel menyediakan 2 pilihan: **Pilihan 1: Nameservers (Direkomendasikan)** Arahkan nameservers ke Vercel: ``` ns1.vercel-dns.com ns2.vercel-dns.com ``` **Pilihan 2: A Record** ``` A Record: @ → 76.76.21.21 ``` ### Sertifikat SSL Otomatis provision SSL lewat Let's Encrypt. Tanpa konfigurasi. HTTPS langsung aktif. ### Domain Utama + www ``` example.com → domain utama www.example.com → redirect ke utama ``` Atur di pengaturan domain. ## Pratinjau Deployment Ini fitur andalan Vercel. ### Cara Kerjanya 1. Buka PR di GitHub 2. Vercel otomatis deploy pratinjau 3. Bot komen dengan URL pratinjau 4. Review perubahan di live pratinjau 5. Merge = otomatis deploy ke production ### URL Pratinjau ``` # Format [branch]-[project]-[team].vercel.app # Contoh feature-auth-myapp-galih.vercel.app ``` ### Contoh Penggunaan - Tes fitur sebelum merge - Bagikan ke desainer/stakeholder - QA testing - Visual regression testing ## Optimasi Build ### Optimasi Next.js ```javascript // next.config.js module.exports = { // Image optimization images: { domains: ['example.com'], formats: ['image/avif', 'image/webp'] }, // Compression compress: true, // Static exports for specific paths experimental: { outputFileTracingRoot: path.join(__dirname, '../../') }, // Reduce build size swcMinify: true, // Analyze bundle webpack: (config, { isServer }) => { if (!isServer) { config.resolve.fallback.fs = false } return config } } ``` ### Analisis Ukuran Bundle ```bash npm install @next/bundle-analyzer # next.config.js const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' }) module.exports = withBundleAnalyzer({ // config }) # Jalankan analisis ANALYZE=true npm run build ``` ### Kurangi Dependencies ```bash # Cek ukuran bundle npm install -g bundle-phobia-cli bundle-phobia [package-name] # Cari package duplikat npm dedupe ``` ## Strategi Caching ### File Statis Vercel otomatis cache file statis: ``` /_next/static/* → Cache selamanya (immutable) /public/* → Cache dengan validasi ``` ### API Routes ```typescript // pages/api/data.ts export default function handler(req, res) { // Cache for 60 seconds, revalidate in background res.setHeader('Cache-Control', 's-maxage=60, stale-while-revalidate') res.json({ data: 'Some data' }) } ``` ### Incremental Static Regeneration (ISR) ```typescript // pages/posts/[slug].tsx export async function getStaticProps({ params }) { const post = await getPost(params.slug) return { props: { post }, revalidate: 60 // Revalidate every 60 seconds } } ``` ## Fungsi Edge Deploy fungsi ke edge network (lebih dekat dengan user): ```typescript // app/api/hello/route.ts export const runtime = 'edge' export async function GET(request: Request) { return new Response( JSON.stringify({ message: 'Hello from edge!' }), { headers: { 'content-type': 'application/json' } } ) } ``` Manfaatnya: - Latensi lebih rendah - Performa lebih bagus secara global - Hemat biaya ## Monitoring & Analitik ### Vercel Analytics Tambah analytics ke Next.js: ```bash npm install @vercel/analytics ``` ```typescript // app/layout.tsx import { Analytics } from '@vercel/analytics/react' export default function RootLayout({ children }) { return ( {children} ) } ``` Get insights: - Page views - Web vitals (Core Web Vitals) - Real user monitoring ### Speed Insights ```bash npm install @vercel/speed-insights ``` ```typescript import { SpeedInsights } from '@vercel/speed-insights/next' export default function RootLayout({ children }) { return ( {children} ) } ``` ## Rollback & Redeploy ### Rollback to Previous Deploy 1. Deployments tab 2. Find working deployment 3. Click "Promote to Production" Instant rollback. No redeploy needed. ### Redeploy Trigger redeploy tanpa code changes: 1. Deployments tab 2. Click "..." on any deployment 3. Select "Redeploy" Useful buat: - Apply new env variables - Retry failed builds - Update dependencies ## Security Best Practices ### Environment Variables Security ```bash # Don't expose secrets to browser NEXT_PUBLIC_SECRET_KEY=xxx # Server-only SECRET_KEY=xxx ``` ### Authentication Headers ```typescript // middleware.ts import { NextResponse } from 'next/server' export function middleware(request) { const authHeader = request.headers.get('authorization') if (!authHeader) { return NextResponse.json( { error: 'Unauthorized' }, { status: 401 } ) } return NextResponse.next() } ``` ### Rate Limiting ```typescript // lib/rate-limit.ts const rateLimits = new Map() export function rateLimit(ip: string) { const now = Date.now() const windowStart = now - 60000 // 1 minute window const requests = rateLimits.get(ip) || [] const recentRequests = requests.filter(time => time > windowStart) if (recentRequests.length >= 10) { return false // Rate limit exceeded } recentRequests.push(now) rateLimits.set(ip, recentRequests) return true } ``` ## CI/CD Integration ### GitHub Actions ```yaml # .github/workflows/ci.yml name: CI on: pull_request: branches: [main] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 - name: Install run: npm ci - name: Lint run: npm run lint - name: Test run: npm test - name: Build run: npm run build ``` Vercel auto-deploy setelah CI pass. ### Deploy Hooks Trigger deploy via webhook: ```bash curl -X POST https://api.vercel.com/v1/integrations/deploy/xxx/xxx ``` Use cases: - Deploy on CMS content update - Scheduled rebuilds - External system triggers ## Tips Performa 1. **Enable compression** - Auto-enabled, verify in response headers 2. **Optimize images** - Pake Next.js Image component 3. **Code splitting** - Dynamic imports buat large components 4. **Minimize JavaScript** - Hapus unused code 5. **Use Edge Functions** - Buat globally distributed logic 6. **Implement caching** - Aggressive cache static content 7. **Monitor Core Web Vitals** - Pake Vercel Analytics ## Common Issues ### Build Timeout Vercel free tier: 15 min limit Solutions: - Optimize dependencies - Remove unused packages - Use faster package manager (pnpm/bun) - Upgrade to Pro plan ### Memory Limit Error: "Out of memory" Solutions: ```javascript // next.config.js module.exports = { experimental: { craCompat: true } } ``` Or upgrade plan for more memory. ### Environment Variables Not Working - Check variable names match exactly - Rebuild after adding new variables - Verify scope (Production vs Preview) - Remember NEXT_PUBLIC_ prefix for browser exposure ## Kapan Pakai Vercel? ### Pakai Vercel Kalau: **1. JAMstack Applications** - Next.js, React, Vue, Svelte, Nuxt - Static Site Generators (Gatsby, Hugo, Astro) - Single Page Applications (SPA) **2. Fast Iteration Needed** - Startup yang butuh ship fast - Prototype & MVP development - Client projects dengan deadline ketat **3. Global Audience** - Users spread across different countries - Need consistent fast performance globally - SEO-critical applications **4. Team Collaboration** - Multiple developers working together - Need preview URLs untuk review - Designer/stakeholder involvement **5. Budget Conscious** - Personal projects - Side hustles - Portfolio websites - Open source projects ### Jangan Pakai Vercel Kalau: **1. Complex Backend Logic** - Heavy database operations - Long-running processes - WebSockets (limited support) **→ Better:** Traditional VPS atau AWS EC2 **2. Full Control Required** - Custom server configuration - Specific OS requirements - Root access needed **→ Better:** DigitalOcean, AWS, GCP **3. Budget Constraints (High Traffic)** - Traffic > 100GB/month di free tier - Need unlimited bandwidth **→ Better:** VPS dengan unlimited bandwidth **4. Monolithic Apps** - Traditional backend (Django, Rails, Laravel full app) - Not API-based architecture **→ Better:** Heroku, Railway, or VPS ## Real-World Use Cases ### Use Case 1: Freelancer Portfolio + Blog **Scenario:** - Freelance designer butuh portfolio website - Blog untuk showcase work - Contact form - Budget: $0 **Tech Stack:** - Next.js (App Router) - Markdown untuk blog posts - Vercel KV untuk contact form submissions - Vercel Analytics **Setup:** ```bash # 1. Create Next.js project npx create-next-app@latest portfolio cd portfolio # 2. Add blog functionality # - Create content/posts/ folder # - Add MDX support # 3. Deploy git init git add . git commit -m "Initial commit" git remote add origin https://github.com/username/portfolio git push -u origin main # 4. Connect to Vercel vercel ``` **Result:** - Website live dalam 5 menit - Custom domain (yourdomain.com) - Automatic HTTPS - Perfect Lighthouse scores (100/100) - $0/month cost ### Use Case 2: SaaS Product dengan Global Users **Scenario:** - SaaS startup - Users di US, Europe, Asia - Need fast API responses globally - Preview environments untuk testing **Tech Stack:** - Next.js frontend - Next.js API routes (Edge Functions) - PostgreSQL (Vercel Postgres) - Redis (Upstash) **Architecture:** ``` Frontend (Static) → Global CDN API Routes (Edge) → Run at edge locations Database → Vercel Postgres (primary region) Cache → Upstash Redis (global) ``` **vercel.json:** ```json { "functions": { "app/api/**/*.ts": { "runtime": "edge" } }, "regions": ["iad1", "sfo1", "sin1", "fra1"] } ``` **Manfaat:** - API latency < 50ms globally - Preview deployments untuk setiap feature branch - Easy rollback kalau ada issues - Built-in monitoring & analytics **Monthly Cost:** - Free tier: First 100GB bandwidth free - Pro plan ($20/mo): Up to 1TB bandwidth - Scale as needed ### Use Case 3: Agency dengan Multiple Client Sites **Scenario:** - Digital agency - 20+ client websites - Different developers per project - Need consistent workflow **Setup:** 1. **Vercel Teams** - Organize clients 2. **Shared deployment configs** - Consistent settings 3. **Environment variables per project** - Client-specific configs 4. **Preview URLs** - Client can review before launch **Workflow:** ``` 1. Developer creates feature branch 2. Push → Auto-deploy preview 3. Send preview URL to client 4. Client approves 5. Merge → Auto-deploy production 6. Invoice client (markup Vercel cost + dev hours) ``` **Example Pricing:** ``` Vercel Pro: $20/mo (agency account) Per project: $0 (included in Pro) Charge client: $50-100/mo (website + hosting + support) Profit margin: $30-80/mo per client 20 clients = $600-1600/mo profit from hosting alone ``` ### Use Case 4: E-Commerce Store (Next.js + Shopify) **Scenario:** - Online store dengan Shopify backend - Custom frontend untuk better UX - Need fast loading untuk conversions - SEO crucial **Tech Stack:** - Next.js (Static + ISR) - Shopify Storefront API - Vercel Edge Middleware (geolocation) - Vercel Analytics + Speed Insights **Key Features:** ```typescript // app/products/[slug]/page.tsx export async function generateStaticParams() { const products = await getProducts() return products.map(p => ({ slug: p.slug })) } export async function generateMetadata({ params }) { const product = await getProduct(params.slug) return { title: product.name, description: product.description, openGraph: { images: [product.image] } } } export default async function ProductPage({ params }) { const product = await getProduct(params.slug) return } export const revalidate = 3600 // Revalidate every hour ``` **middleware.ts:** ```typescript import { NextResponse } from 'next/server' export function middleware(request) { const country = request.geo?.country || 'US' const currency = getCurrencyByCountry(country) const response = NextResponse.next() response.cookies.set('currency', currency) return response } ``` **Performance:** - First Load: < 1s - Lighthouse Score: 95+ - Auto-update inventory via ISR - Geo-based currency detection **Result:** - 40% faster than Shopify default theme - 25% increase in conversions - Better SEO rankings ### Use Case 5: Documentation Site untuk Open Source **Scenario:** - Open source project - Need documentation site - Multi-language support - Community contributions via PRs **Tech Stack:** - Nextra (Next.js + MDX) - GitHub for content - Vercel for deployment - Algolia for search **Setup:** ```bash npx create-nextra-app docs cd docs # Edit pages/ # - en/ # - id/ # - zh/ git push # Deploy via Vercel GitHub integration ``` **Features:** - Preview deployments untuk docs PRs - Community can preview their contributions - Auto-deploy on merge - Search via Algolia (free for open source) - Multi-language routing **Cost:** $0 (free for open source) ## Kesimpulan Vercel menawarkan developer experience yang ga tertandingi buat deployment. Zero-config, preview deployments, global CDN, dan analytics bawaan. ### Checklist: Deploy Production-Ready ke Vercel **Pre-Deployment:** - [ ] Test build locally: `npm run build` - [ ] Check bundle size: Optimize if needed - [ ] Setup environment variables - [ ] Configure custom domain - [ ] Add error tracking (Sentry, etc) **SEO & Performance:** - [ ] Add proper meta tags - [ ] Setup sitemap.xml - [ ] Configure robots.txt - [ ] Optimize images (use Next.js Image) - [ ] Enable compression - [ ] Setup redirects if needed **Security:** - [ ] Never expose secrets to browser - [ ] Setup rate limiting - [ ] Add authentication if needed - [ ] Configure CORS properly - [ ] Enable security headers **Monitoring:** - [ ] Install Vercel Analytics - [ ] Install Speed Insights - [ ] Setup error alerts - [ ] Configure deploy notifications - [ ] Monitor Core Web Vitals **Post-Deployment:** - [ ] Test all major features - [ ] Check mobile responsiveness - [ ] Verify SSL certificate - [ ] Test from different countries (VPN) - [ ] Monitor first 24h closely ### Langkah Selanjutnya **Week 1: Basic Setup** 1. Deploy first application 2. Setup custom domain 3. Configure environment variables 4. Test preview deployments **Week 2: Optimization** 1. Analyze bundle size 2. Optimize images 3. Setup caching strategies 4. Monitor performance metrics **Week 3: Advanced** 1. Setup Edge Functions 2. Configure ISR for dynamic content 3. Add middleware for custom logic 4. Setup CI/CD with GitHub Actions **Week 4: Production Ready** 1. Add monitoring & alerts 2. Setup error tracking 3. Configure rollback strategy 4. Document deployment process ### Quick Start Commands ```bash # Install Vercel CLI npm i -g vercel # Login vercel login # Deploy to preview vercel # Deploy to production vercel --prod # Check logs vercel logs # List deployments vercel ls # Rollback vercel rollback # Add domain vercel domains add yourdomain.com # List env variables vercel env ls # Pull env to local vercel env pull ``` ### Resources Belajar Lebih Lanjut **Official Resources:** - [Vercel Documentation](https://vercel.com/docs) - [Next.js on Vercel](https://vercel.com/docs/frameworks/nextjs) - [Edge Functions Guide](https://vercel.com/docs/functions/edge-functions) - [Vercel CLI Reference](https://vercel.com/docs/cli) **Community:** - [Vercel Community](https://github.com/vercel/vercel/discussions) - [Next.js Discord](https://discord.gg/nextjs) - [Vercel Examples](https://github.com/vercel/examples) **Tools:** - [Vercel Speed Insights](https://vercel.com/docs/speed-insights) - [Vercel Analytics](https://vercel.com/analytics) - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) ### Pro Tips 1. **Use Preview URLs untuk client review** - No need staging server 2. **Leverage Edge Functions** - Better performance globally 3. **Monitor Core Web Vitals** - SEO & UX impact 4. **Setup deploy notifications** - Stay informed 5. **Use `vercel env pull`** - Sync env locally ### Kesalahan Umum to Avoid 1. **Hardcode API URLs** - Use environment variables 2. **Skip bundle optimization** - Analyze & optimize before deploy 3. **Ignore preview deployments** - Test thoroughly di preview sebelum merge 4. **Expose secrets to browser** - Use server-only variables (no NEXT_PUBLIC_) 5. **No monitoring setup** - Install Analytics & Speed Insights from day 1 Ikutin best practices di atas, dan website kamu bakal production-ready dengan performa optimal. Terus berkarya!