Vercel: Frontend Cloud Platform

# 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 });
}