Deploy Aplikasi Next.js ke Vercel: Panduan Lengkap

Vercel adalah platform hosting terbaik untuk Next.js (mereka yang membuat Next.js!). Di tutorial ini, kita akan belajar cara deploy aplikasi Next.js ke Vercel.

Kenapa Vercel?

1. Zero configuration - Deploy langsung tanpa setup
2. Automatic SSL - HTTPS gratis
3. Edge Network - CDN global untuk performa terbaik
4. Preview Deployments - Setiap PR dapat preview URL
5. Serverless Functions - API routes otomatis jadi serverless

Prerequisites

• Akun GitHub/GitLab/Bitbucket
• Akun Vercel (gratis)
• Aplikasi Next.js yang ready

Cara Deploy

Method 1: Connect Git Repository (Recommended)

Step 1: Push code ke GitHub
Step 2: Login ke vercel.com
Step 3: Klik "New Project"
Step 4: Import repository dari GitHub
Step 5: Vercel otomatis detect Next.js
Step 6: Klik "Deploy"

Setelah connect, setiap push ke main branch akan auto-deploy!

Method 2: Vercel CLI

# Install Vercel CLI
npm install -g vercel

# Login
vercel login

# Deploy
vercel

# Deploy ke production
vercel --prod

Environment Variables

Di Vercel Dashboard

Project Settings > Environment Variables

Name: DATABASE_URL
Value: postgresql://...
Environment: Production, Preview, Development

Environment Types

| Type | Kapan Digunakan | |------|-----------------| | Production | Deploy ke main branch | | Preview | Deploy PR/branch lain | | Development | vercel dev local |

Tips

# Untuk secret keys, jangan hardcode!
# ❌ Bad
const API_KEY = "sk-1234567890";

# ✅ Good
const API_KEY = process.env.API_KEY;

Custom Domain

Tambah Domain di Vercel

1. Go to Project > Settings > Domains
2. Add yourdomain.com
3. Vercel akan memberikan DNS records

Setup DNS

Di domain registrar Anda (Cloudflare, Namecheap, etc):

Type: A
Name: @
Value: 76.76.21.21

Type: CNAME  
Name: www
Value: cname.vercel-dns.com

Verify

Setelah DNS propagate (biasanya 1-24 jam), domain akan aktif dengan SSL.

Build Configuration

Next.js Config

// next.config.js
module.exports = {
  // Untuk static export
  output: 'export',
  
  // Image optimization
  images: {
    domains: ['example.com'],
    unoptimized: true, // untuk static export
  },
  
  // Environment variables yang di-expose ke client
  env: {
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
  },
};

Build Command

Default: npm run build atau next build

Bisa diubah di Vercel dashboard jika perlu.

Troubleshooting

Error: Build Failed

# Check logs di Vercel dashboard

# Common issues:
# 1. Missing dependencies
npm install

# 2. TypeScript errors
npx tsc --noEmit

# 3. ESLint errors
npm run lint

Error: API Routes Not Working

Pastikan API routes ada di folder yang benar:

# App Router
app/api/hello/route.ts

# Pages Router  
pages/api/hello.ts

Error: Environment Variables Undefined

// ❌ Wrong
const url = process.env.API_URL;

// ✅ Correct - pastikan sudah di-set di Vercel
// Dan re-deploy setelah add env vars

Error: Image Optimization Failed

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        pathname: '/images/**',
      },
    ],
  },
};

Preview Deployments

Setiap Pull Request otomatis mendapat preview URL:

https://project-git-feature-branch-username.vercel.app

Ini sangat berguna untuk:

• Review dari team
• Testing sebelum merge
• Client preview

Monetisasi: Pricing

| Plan | Harga | Cocok Untuk | |------|-------|-------------| | Hobby | Gratis | Personal projects, portfolio | | Pro | $20/bulan | Team, production apps | | Enterprise | Custom | Large scale applications |

Batasan Free Tier

• 100GB bandwidth/bulan
• Serverless function: 100GB-hours
• 6000 build minutes/bulan

Untuk kebanyakan personal project dan small business, free tier sudah cukup!

Tips Optimasi

1. Caching

// API route dengan caching
export async function GET() {
  return Response.json(data, {
    headers: {
      'Cache-Control': 's-maxage=3600, stale-while-revalidate',
    },
  });
}

2. Incremental Static Regeneration

// Revalidate setiap 1 jam
export const revalidate = 3600;

export default async function Page() {
  const data = await fetchData();
  return <div>{data}</div>;
}

3. Edge Functions

// Jalankan di edge untuk latency rendah
export const runtime = 'edge';

export async function GET() {
  return Response.json({ message: 'Hello from Edge!' });
}

Kesimpulan

Deploy ke Vercel sangat mudah:

1. Connect repository
2. Set environment variables
3. Add custom domain
4. Done!

Vercel menangani semua complexity - SSL, CDN, serverless scaling, dan preview deployments.

Untuk project Next.js, Vercel adalah pilihan hosting terbaik. Coba sekarang! 🚀