Vercel: Frontend Cloud Platform

# Install Vercel CLI global
npm install -g vercel

# Atau gunakan npx (tanpa install global)
npx vercel --version

# Login ke akun Vercel
vercel login
# Browser akan terbuka untuk autentikasi

# Verifikasi login
vercel whoami

# Buat project Next.js baru
npx create-next-app@latest my-vercel-app
cd my-vercel-app

# Deploy ke Vercel (preview)
vercel

# Deploy ke production
vercel --prod

# Deploy dengan nama project spesifik
vercel --name my-awesome-app --prod

# Tampilkan URL deployment
vercel ls

# Lihat log deployment
vercel logs https://my-awesome-app.vercel.app

# Cara 1: Import dari Vercel Dashboard (https://vercel.com/new)
# - Pilih repository dari GitHub/GitLab/Bitbucket
# - Vercel auto-detect framework settings
# - Klik Deploy

# Cara 2: Link existing project
vercel link

# Cara 3: Deploy dari Git dengan Vercel CLI
vercel --git-url https://github.com/username/repo

// app/page.tsx — Home page
export default function HomePage() {
  return (
    <main>
      <h1>Selamat Datang di Aplikasi Saya</h1>
      <p>Dideploy dengan Vercel 🚀</p>
    </>
  );
}

// app/about/page.tsx — Static page (SSG)
export default function AboutPage() {
  return <h1>Tentang Kami</h1>;
}

// app/blog/[slug]/page.tsx — Dynamic page (SSR/ISR)
interface Props {
  params: Promise<{ slug: string }>;
}

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const post = await fetch(
    `https://api.example.com/posts/${slug}`,
    { next: { revalidate: 3600 } } // ISR: revalidate setiap jam
  ).then(r => r.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// app/api/users/route.ts — API Route
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const users = await db.user.findMany();
  return NextResponse.json(users);
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const user = await db.user.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

// app/api/hello/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  return NextResponse.json({
    message: 'Hello from Vercel Serverless!',
    timestamp: new Date().toISOString(),
    region: process.env.VERCEL_REGION || 'unknown'
  });
}

// app/api/users/[id]/route.ts — Dynamic API route
export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const user = await getUserFromDB(id);
  
  if (!user) {
    return NextResponse.json(
      { error: 'User not found' },
      { status: 404 }
    );
  }
  
  return NextResponse.json(user);
}

// app/api/upload/route.ts — File upload handler
export async function POST(request: NextRequest) {
  const formData = await request.formData();
  const file = formData.get('file') as File;
  
  if (!file) {
    return NextResponse.json(
      { error: 'No file uploaded' },
      { status: 400 }
    );
  }
  
  // Process file...
  const bytes = await file.arrayBuffer();
  const buffer = Buffer.from(bytes);
  
  return NextResponse.json({
    filename: file.name,
    size: buffer.length,
    type: file.type
  });
}

// vercel.json — Konfigurasi serverless functions
{
  "functions": {
    "app/api/heavy-task/**": {
      "maxDuration": 60,
      "memory": 1024
    },
    "app/api/quick/**": {
      "maxDuration": 10,
      "memory": 256
    }
  },
  "regions": ["sin1"],  // Deploy ke Singapore region
  "crons": [
    {
      "path": "/api/cron/daily-cleanup",
      "schedule": "0 0 * * *"
    }
  ]
}

// Runtime Node.js yang tersedia di Vercel:
// - Node.js 18 (default)
// - Node.js 20
// - Python 3.9
// - Go 1.x
// - Ruby 3.2

// Middleware — Edge Function yang berjalan sebelum setiap request
// middleware.ts (di root project)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export const config = {
  matcher: ['/dashboard/:path*', '/api/:path*']
};

export function middleware(request: NextRequest) {
  // Geolocation-based redirect
  const country = request.geo?.country || 'US';
  const locale = country === 'ID' ? 'id' : 'en';
  
  // Authentication check
  const token = request.cookies.get('auth-token')?.value;
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  // A/B testing — 50/50 split
  const bucket = request.cookies.get('ab-bucket')?.value;
  if (!bucket) {
    const newBucket = Math.random() < 0.5 ? 'A' : 'B';
    const response = NextResponse.next();
    response.cookies.set('ab-bucket', newBucket);
    return response;
  }
  
  // Add custom headers
  const response = NextResponse.next();
  response.headers.set('x-user-country', country);
  response.headers.set('x-ab-bucket', bucket || 'A');
  return response;
}

// app/api/geo/route.ts — Edge API Route
export const runtime = 'edge';

export async function GET(request: NextRequest) {
  const { geo, headers } = request;
  
  return new Response(JSON.stringify({
    country: geo?.country,
    city: geo?.city,
    region: geo?.region,
    latitude: geo?.latitude,
    longitude: geo?.longitude,
    ip: headers.get('x-forwarded-for'),
    userAgent: headers.get('user-agent')
  }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

# Preview deployments mendapatkan URL random
# Contoh: my-app-git-feature-login-username.vercel.app

# Set branch alias untuk URL yang lebih mudah diingat
# Di Vercel Dashboard > Project > Settings > Domains
# atau dengan CLI:
vercel alias set my-app-git-feature-login-username.vercel.app staging.myapp.com

# Set branch-level alias otomatis di vercel.json
{
  "git": {
    "deploymentEnabled": {
      "main": true,
      "develop": true,
      "feature/*": true
    }
  }
}

# Set environment variable via CLI
vercel env add DATABASE_URL
# Pilih environment: Production, Preview, Development

# Set untuk semua environment sekaligus
vercel env add API_SECRET production preview development

# List semua environment variables
vercel env ls

# Pull environment variables ke .env.local
vercel env pull .env.local

# Hapus environment variable
vercel env rm DATABASE_URL

# Tambah domain via CLI
vercel domains add myapp.com

# Tambah subdomain
vercel domains add blog.myapp.com

# List semua domains
vercel domains ls

# Konfigurasi DNS:
# Type: A Record, Name: @, Value: 76.76.21.21
# Type: CNAME, Name: www, Value: cname.vercel-dns.com

# Wildcard domain (Pro/Enterprise plan)
vercel domains add "*.myapp.com"

# Redirect www ke apex domain
# Di vercel.json:
{
  "redirects": [
    { "source": "https://www.myapp.com/:path*", "destination": "https://myapp.com/:path*", "permanent": true }
  ]
}

// app/products/[id]/page.tsx — ISR dengan revalidation
export const revalidate = 60; // Revalidate setiap 60 detik

export default async function ProductPage({ params }) {
  const { id } = await params;
  const product = await fetch(
    `https://api.store.com/products/${id}`,
    { next: { revalidate: 60, tags: ['products'] } }
  );
  
  return (
    <div>
      <h1>{product.name}</h1>
      <p>Harga: Rp {product.price}</p>
    </div>
  );
}

// On-demand revalidation via API route
// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { tag, secret } = await request.json();
  
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
  }
  
  revalidateTag(tag); // 'products'
  return NextResponse.json({ revalidated: true, tag });
}