Cara Deploy Next.js ke Vercel (Step-by-Step, Lengkap 2026)

Deploy Next.js ke Vercel itu kayak setrika baju — keliatannya ribet kalau belum pernah coba, tapi begitu tau caranya, kamu bisa kelar dalam hitungan menit. Vercel punya built-in support untuk Next.js (mereka yang bikin framework-nya juga), jadi hampir semua fitur otomatis jalan tanpa konfigurasi rumit.

Di tutorial ini, aku bakal cover semuanya dari nol sampai production-ready: setup project, connect ke GitHub, deploy otomatis, set environment variables, pasang custom domain, sampai tips optimasi performa. Gas!

Kenapa Vercel untuk Next.js?

Sebelum masuk ke step-by-step, penting untuk paham kenapa Vercel jadi pilihan utama untuk deploy Next.js:

Kelebihan Vercel:

Zero-config deployment — upload repo, langsung jalan. Tidak perlu setup server, nginx, atau Docker
Built-in CI/CD — setiap push ke GitHub otomatis trigger deploy baru
Preview deployments — setiap pull request otomatis dapat URL preview terpisah
Serverless functions — API routes Next.js otomatis di-deploy sebagai serverless functions
Edge network global — konten di-cache di 100+ edge locations worldwide
Analytics & speed insights — built-in performance monitoring
Generous free tier — unlimited deployments untuk hobby projects

Kapan pakai Vercel vs alternatif:

Vercel: Next.js projects, JAMstack, SaaS landing pages
Netlify: static sites, form handling, CMS integration
Railway/Fly.io: full-stack apps yang butuh custom server
AWS Amplify: projects yang butuh integrasi AWS ecosystem

Kalau kamu pakai Next.js, Vercel jelas pilihan paling natural. Mereka maintain framework-nya, jadi compatibility terjamin.

Prasyarat

Sebelum mulai, pastikan kamu sudah punya:

Node.js 18+ terinstall — cek dengan node -v
Akun GitHub — untuk host repository
Akun Vercel — daftar gratis di vercel.com (bisa pakai GitHub SSO)
Code editor — VS Code atau favorit kamu

Kalau belum install Node.js, pakai nvm (recommended):

# Install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Install Node.js 20 LTS
nvm install 20
nvm use 20

# Verify
node -v  # v20.x.x
npm -v   # 10.x.x

Step 1: Buat Next.js Project

Kalau kamu sudah punya project Next.js yang mau di-deploy, skip ke Step 2.

Buat project baru:

npx create-next-app@latest my-nextjs-app

Opsi yang muncul, pilih sesuai kebutuhan:

Would you like to use TypeScript? → Yes
Would you like to use ESLint? → Yes
Would you like to use Tailwind CSS? → Yes
Would you like to use `src/` directory? → Yes
Would you like to use App Router? → Yes
Would you like to customize the default import alias? → No

Masuk ke directory project:

cd my-nextjs-app

Jalankan development server untuk memastikan semuanya jalan:

npm run dev

Buka http://localhost:3000 di browser. Kalau halaman default Next.js muncul, berarti project sudah siap.

Tips: Kalau kamu mau deploy project yang sudah ada, pastikan file next.config.js atau next.config.mjs tidak ada konfigurasi yang hanya jalan di local (misalnya path ke file lokal yang tidak ada di GitHub).

Step 2: Init Git & Push ke GitHub

Vercel deploy dari repository GitHub, jadi kamu perlu push project ke GitHub dulu.

# Init git (kalau belum)
git init

# Buat .gitignore (harusnya sudah ada dari create-next-app)
# Pastikan public/ dan .next/ ada di .gitignore
cat .gitignore

# Add & commit
git add .
git commit -m "Initial commit: Next.js project ready for Vercel"

# Buat repository baru di GitHub via CLI
gh repo create my-nextjs-app --public --source=. --push

Kalau pakai manual upload:

Buat repository baru di github.com/new
Copy URL repository-nya
Jalankan:

git remote add origin https://github.com/username/my-nextjs-app.git
git branch -M main
git push -u origin main

Pastikan repository-nya public atau Vercel punya akses ke private repository-nya.

Step 3: Deploy ke Vercel

Metode 1: Deploy via Dashboard (Recommended untuk Pemula)

Login ke vercel.com/new
Klik “Import Git Repository”
Pilih repository my-nextjs-app dari GitHub
Vercel otomatis detect framework: Next.js
Klik “Deploy”

Tunggu 30-60 detik. Selesai! Kamu akan dapat URL seperti my-nextjs-app.vercel.app.

Metode 2: Deploy via Vercel CLI

Install Vercel CLI global:

npm install -g vercel

vercel login

Deploy:

# Deploy ke production
vercel --prod

# Atau deploy ke preview (untuk testing)
vercel

CLI-nya bakal tanya beberapa hal:

Link to existing project? → No (kalau pertama kali)
Project name? → my-nextjs-app (atau enter untuk default)
Directory? → ./ (current directory)

Deploy selesai dalam hitungan detik. URL production akan muncul di output.

Metode 3: Deploy via Git Push (Otomatis)

Setelah repo terhubung ke Vercel, setiap push ke branch main otomatis trigger deploy:

# Bikin perubahan
echo "// Update" >> app/page.tsx

# Push ke GitHub
git add .
git commit -m "Update: minor change"
git push

# Vercel otomatis deploy dalam ~30 detik

Ini yang bikin Vercel powerful — kamu fokus coding, deploy-nya otomatis.

Step 4: Environment Variables

Kalau project kamu pakai environment variables (database URL, API keys, dll), kamu perlu set-nya di Vercel supaya bisa jalan di production.

Cara Set di Dashboard

Buka project di Vercel dashboard
Klik tab “Settings”
Klik “Environment Variables”
Tambahkan variable yang dibutuhkan:

DATABASE_URL=postgresql://user:pass@host:5432/db
NEXT_PUBLIC_API_KEY=your-api-key-here

Penting:

Variable dengan prefix NEXT_PUBLIC_ bisa diakses di client-side
Variable tanpa prefix hanya bisa diakses di server-side
Set Environment (Production, Preview, Development) untuk tiap variable

Cara Set via CLI

vercel env add DATABASE_URL
# Pilih: Production, Preview, atau Development
# Paste value-nya

Set via `.env` File (Development Saja)

Buat .env.local di root project untuk local development:

DATABASE_URL=postgresql://localhost:5432/mydb
NEXT_PUBLIC_API_KEY=local-dev-key

Jangan commit .env.local ke git. Pastikan ada di .env di .gitignore.

Step 5: Custom Domain

URL default Vercel (my-nextjs-app.vercel.app) bisa diganti ke domain sendiri.

Cara Setup

Buka project di Vercel dashboard
Klik tab “Settings” → “Domains”
Masukkan domain kamu (contoh: mysite.com)
Klik “Add”

Vercel akan memberikan DNS records yang perlu kamu tambahkan:

Untuk apex domain (mysite.com):

Type: A
Name: @
Value: 76.76.21.21

Untuk subdomain (www.mysite.com):

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

Setup di Provider DNS

Cloudflare:

Login ke Cloudflare dashboard
Pilih domain → DNS → Records
Tambah record sesuai instruksi Vercel
Nonaktifkan Cloudflare proxy (orange cloud) untuk record A
Tunggu 5-10 menit untuk propagation

Google Domains / Cloudflare Registrar:

Buka DNS settings
Tambahkan records sesuai instruksi Vercel
Tunggu propagation (biasanya < 30 menit)

Verifikasi SSL

Vercel otomatis setup SSL certificate (Let’s Encrypt) untuk domain kamu. Setelah DNS propagate, kunjungi https://mysite.com untuk verifikasi.

Kalau belum jalan:

Cek DNS propagation: dig mysite.com atau pakai dnschecker.org
Pastikan record DNS sudah benar
Tunggu beberapa menit, biasanya propagate dalam 5-30 menit

Step 6: Konfigurasi Build

Vercel otomatis detect Next.js dan set build command yang benar. Tapi kadang kamu perlu customize.

Build Command Default

{
  "buildCommand": "next build",
  "outputDirectory": ".next",
  "framework": "nextjs"
}

Custom Build Settings

Kalau pakai monorepo atau custom setup:

Vercel dashboard → Project → Settings → General
Scroll ke “Build & Development Settings”
Override sesuai kebutuhan:

Build Command: cd apps/web && next build
Output Directory: apps/web/.next
Install Command: npm install

Monorepo Setup

Untuk monorepo (Turborepo, Nx, Lerna):

# turbo.json — pastikan build script benar
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    }
  }
}

Di Vercel dashboard, set Root Directory ke subdirectory yang benar (misalnya apps/web).

Step 7: Preview Deployments

Fitur ini powerful untuk team collaboration. Setiap pull request di GitHub otomatis dapat URL preview.

Cara Kerja

Buat branch baru dari main:

git checkout -b feature/new-page

Bikin perubahan, push ke GitHub:

git add .
git commit -m "feat: add new page"
git push origin feature/new-page

Buka pull request di GitHub
Vercel otomatis deploy URL preview seperti: feature-new-page-my-nextjs-app.vercel.app
URL preview otomatis diposting sebagai comment di pull request
Setiap update ke branch, preview deploy otomatis update

Benefits

Reviewer bisa langsung lihat perubahan sebelum merge
QA testing di environment production-like
Client review pakai URL yang bisa diakses
Tidak perlu setup staging server manual

Step 8: Monitoring & Analytics

Vercel menyediakan monitoring built-in yang berguna untuk track performa.

Web Analytics

Vercel dashboard → Project → Analytics
Klik “Enable Web Analytics”
Tambahkan snippet tracking ke layout.tsx:

import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Speed Insights

import { SpeedInsights } from '@vercel/speed-insights/next';

// Tambahkan di layout.tsx bersama Analytics
<SpeedInsights />

Logs

Akses logs di Vercel dashboard → Project → Logs:

Function Logs — API routes execution logs
Build Logs — build process output
Edge Logs — edge middleware execution

Error Tracking

Untuk error tracking yang lebih advanced, integrasikan:

Sentry — error tracking & performance monitoring
LogRocket — session replay & error monitoring
Axiom — logging & observability (free tier generous)

Step 9: Performance Optimization

Next.js + Vercel sudah optimized by default, tapi ada beberapa hal yang bisa kamu lakukan untuk performa lebih baik.

Image Optimization

Gunakan next/image untuk otomatis optimize gambar:

import Image from 'next/image';

// ❌ Jangan pakai <img> biasa
<img src="/hero.png" width={800} height={400} />

// ✅ Pakai next/image
<Image
  src="/hero.png"
  width={800}
  height={400}
  alt="Hero image"
  priority  // untuk above-the-fold images
/>

Font Optimization

Gunakan next/font untuk menghindari layout shift:

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Caching Strategy

// Server Component — cached by default
async function getData() {
  const res = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // Revalidate setiap jam
  });
  return res.json();
}

// Atau static (tidak pernah revalidate)
async function getStaticData() {
  const res = await fetch('https://api.example.com/data', {
    cache: 'force-cache'
  });
  return res.json();
}

Bundle Analysis

Install bundle analyzer untuk lihat size setiap package:

npm install @next/bundle-analyzer

// next.config.mjs
const withBundleAnalyzer = (await import('@next/bundle-analyzer')).default({
  enabled: process.env.ANALYZE === 'true',
});

export default withBundleAnalyzer({
  // config lainnya
});

Jalankan:

ANALYZE=true next build

Step 10: Tips Production

1. Gunakan Environment Variables yang Benar

// ❌ Hardcode values
const API_URL = 'https://api.example.com';

// ✅ Pakai environment variables
const API_URL = process.env.NEXT_PUBLIC_API_URL;

2. Error Handling

// app/error.tsx — Error boundary untuk App Router
'use client';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

3. Loading States

// app/loading.tsx — Loading UI untuk App Router
export default function Loading() {
  return <div>Loading...</div>;
}

4. Rate Limiting untuk API Routes

// lib/rate-limit.ts
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, '10 s'),
});

export async function rateLimit(identifier: string) {
  const { success } = await ratelimit.limit(identifier);
  return success;
}

5. Monitoring Uptime

Gunakan layanan monitoring untuk track uptime:

Betterstack — free tier 5 monitors
UptimeRobot — free tier 50 monitors
Checkly — synthetic monitoring

Troubleshooting

Build Error: Module Not Found

# Pastikan semua dependency terinstall
npm install

# Clear cache
rm -rf .next node_modules
npm install

# Deploy ulang
vercel --prod

Environment Variables Tidak Jalan

Pastikan variable name TIDAK ada spasi
Pastikan sudah di-set untuk environment yang benar (Production/Preview)
Variable dengan prefix NEXT_PUBLIC_ hanya bisa diakses client-side
Redeploy setelah mengubah environment variables

Custom Domain Belum Work

Cek DNS propagation: dig yourdomain.com
Pastikan record DNS sudah benar (A record untuk apex, CNAME untuk subdomain)
Tunggu 5-30 menit untuk propagation
Di Cloudflare, pastikan proxy (orange cloud) NONAKTIF untuk record yang mengarah ke Vercel

Gambar Tidak Muncul

Pastikan gambar ada di folder public/ atau pakai URL external
Cek path gambar — hindari ../ yang kompleks
Gunakan next/image untuk optimasi otomatis

Performance Buruk

Cek bundle size: ANALYZE=true next build
Lazy load components yang tidak urgent
Gunakan dynamic imports: const Heavy = dynamic(() => import('./Heavy'))
Kurangi client components, manfaatkan Server Components

FAQ

Berapa biaya deploy Next.js ke Vercel?

Vercel punya free tier yang cukup generous: unlimited deployments, 100GB bandwidth per bulan, dan serverless functions. Untuk production apps dengan traffic tinggi, pakai Pro plan ($20/user/bulan) yang include custom domains, team collaboration, dan analytics.

Bisakah deploy Next.js ke Vercel tanpa GitHub?

Bisa! Pakai Vercel CLI: vercel --prod langsung dari terminal. Atau pakai drag-and-drop di Vercel dashboard (Upload a Next.js Codebase). Tapi integrasi GitHub lebih recommended untuk CI/CD otomatis.

Apakah Vercel mendukung Next.js App Router?

Ya! Vercel fully support Next.js App Router (Next.js 13+). Semua fitur — Server Components, Route Handlers, Server Actions — otomatis di-deploy dan jalan di Vercel tanpa konfigurasi tambahan.

Bagaimana cara rollback kalau deploy bermasalah?

Di Vercel dashboard, buka project → Deployments → pilih deployment yang ingin di-rollback → klik tiga titik → “Promote to Production”. Atau pakai CLI: vercel rollback. Rollback instan, tidak perlu rebuild.

Apakah bisa deploy Next.js dengan backend (database)?

Bisa! Vercel serverless functions bisa connect ke database (PostgreSQL, MySQL, MongoDB, dll). Pakai ORM seperti Prisma atau Drizzle untuk koneksi database. Untuk real-time features, integrasikan dengan layanan seperti Upstash Redis atau Ably.

Berapa lama proses deploy ke Vercel?

Rata-rata 30-60 detik untuk project kecil-menengah. Build time tergantung jumlah dependencies dan complexity project. Vercel cache dependencies untuk deploy selanjutnya, jadi deploy berikutnya lebih cepat.

Kesimpulan

Deploy Next.js ke Vercel itu proses yang cepat dan straightforward. Dari zero sampai production-ready, kamu bisa kelar dalam 15-30 menit. Yang paling powerful dari Vercel adalah zero-config deployment, CI/CD otomatis, dan preview deployments untuk collaboration.

Langkah selanjutnya:

Deploy project pertama kamu ke Vercel (gratis!)
Setup custom domain untuk production
Aktifkan analytics untuk track performa
Eksplorasi fitur lain: Edge Functions, Middleware, Image Optimization

Ada pertanyaan atau stuck di step tertentu? Jangan ragu untuk hubungi via email di [email protected] — aku bantu sebisanya!

Selamat deploy! 🚀

Kenapa Vercel untuk Next.js?#

Prasyarat#

Step 1: Buat Next.js Project#

Step 2: Init Git & Push ke GitHub#

Step 3: Deploy ke Vercel#

Metode 1: Deploy via Dashboard (Recommended untuk Pemula)#

Metode 2: Deploy via Vercel CLI#

Metode 3: Deploy via Git Push (Otomatis)#

Step 4: Environment Variables#

Cara Set di Dashboard#

Cara Set via CLI#

Set via .env File (Development Saja)#

Step 5: Custom Domain#

Cara Setup#

Setup di Provider DNS#

Verifikasi SSL#

Step 6: Konfigurasi Build#

Build Command Default#

Custom Build Settings#

Monorepo Setup#

Step 7: Preview Deployments#

Cara Kerja#

Benefits#

Step 8: Monitoring & Analytics#

Web Analytics#

Speed Insights#

Logs#

Error Tracking#

Step 9: Performance Optimization#

Image Optimization#

Font Optimization#

Caching Strategy#

Bundle Analysis#

Step 10: Tips Production#

1. Gunakan Environment Variables yang Benar#

2. Error Handling#

3. Loading States#

4. Rate Limiting untuk API Routes#

5. Monitoring Uptime#

Troubleshooting#

Build Error: Module Not Found#

Environment Variables Tidak Jalan#

Custom Domain Belum Work#

Gambar Tidak Muncul#

Performance Buruk#

FAQ#

Berapa biaya deploy Next.js ke Vercel?#

Bisakah deploy Next.js ke Vercel tanpa GitHub?#

Apakah Vercel mendukung Next.js App Router?#

Bagaimana cara rollback kalau deploy bermasalah?#

Apakah bisa deploy Next.js dengan backend (database)?#

Berapa lama proses deploy ke Vercel?#

Kesimpulan#