Cara Menggunakan Vercel: Panduan Kilat dari Deploy Pertama hingga Produksi

Q: What is the fastest way to learn how to use Vercel?

Connect your Git repo, deploy a starter (like Next.js), and explore preview URLs on each push. Then add environment variables, a custom domain, and a simple API route to cover the core workflow.

Q: How to use Vercel with Next.js for best performance?

Use ISR (`revalidate`), `next/image` optimization, and Edge Middleware for lightweight logic. Cache external fetches and choose edge or serverless runtimes based on workload.

Q: Can I use Vercel without Next.js?

Yes—Vercel supports frameworks like Astro, SvelteKit, Remix, and Nuxt. Ensure the correct build command and output directory are set, and use `vercel.json` if you need custom routing.

Q: How do I set environment variables on Vercel?

In the Vercel dashboard, go to Project → Settings → Environment Variables and add values for Development, Preview, and Production. Use `NEXT_PUBLIC_` for variables that must be exposed to the client.

Q: How to use Vercel for custom domains and SSL?

Add your domain under Project → Domains; Vercel provisions SSL automatically. Point your DNS records (CNAME or A/ALIAS) to Vercel and verify in the dashboard.

Jika Anda pernah berharap melakukan aplikasi web terasa lebih seperti menyimpan daripada mengirimkan kode, inilah kabar baiknya: itulah persisnya bagaimana rasanya menggunakan Vercel ketika semuanya berjalan lancar. Dalam hitungan menit, Anda dapat beralih dari pengembangan lokal ke aplikasi global yang dipercepat di dengan pratinjau untuk setiap dan tanpa perlu repot dengan DevOps. Panduan praktis dan berorientasi solusi ini memandu Anda langkah demi langkah tentang cara menggunakan Vercel—mencakup pengaturan, seperti Next.js, variabel lingkungan, , Edge Middleware, domain, penyimpanan, observabilitas, dan praktik terbaik produksi.

Kita akan bergerak cepat, tetapi Anda akan mendapatkan panduan, daftar periksa, dan contoh yang dapat Anda salin-tempel. Baik Anda melakukan halaman arahan, Next.js SaaS, atau monorepo, Anda akan mempelajari hal-hal penting untuk melakukan pengiriman dengan percaya diri.

Apa Itu Vercel dan Mengapa Menggunakannya?

Vercel adalah untuk mengembangkan, melihat pratinjau, dan mengirimkan aplikasi web. ini dioptimalkan untuk modern (terutama Next.js), menawarkan:

Deployment instan: Setiap git push menghasilkan URL pratinjau yang unik.

Performa global: Aset statis, Edge Middleware, dan di .

Serverless functions: Rute API tanpa penyediaan .

Pratinjau tanpa CI: Pembuatan + pratinjau otomatis per PR.

Dukungan Next.js kelas satu: Optimalisasi Gambar, , ISR ().

Jika tujuan Anda adalah kecepatan, DX, dan keandalan dengan operasi minimal, mempelajari cara menggunakan Vercel akan memberikan hasil yang cepat.

Pengaturan: Cara Menggunakan Vercel dalam 10 Menit

Buat akun di vercel.com dan hubungkan GitHub/GitLab/Bitbucket.

Impor repositori Anda (misalnya, Next.js, React, SvelteKit, Astro, Remix, Nuxt). Vercel secara otomatis mendeteksi dan pengaturan .

Klik Deploy → Vercel membuat dan memberi Anda URL pratinjau yang unik.

Atur variabel lingkungan di bawah Project → Settings → Environment Variables.

Promosikan ke produksi dengan mengatur Production Branch (biasanya main) dan menggabungkan PR Anda.

Tambahkan domain khusus di bawah Project → Domains dan arahkan DNS.

Pantau , log, dan performa melalui .

Anda baru saja mempelajari jalur terpendek untuk cara menggunakan Vercel. Sekarang mari kita bahas lebih dalam.

Memulai: Dari Lokal ke Pertama

1) Buat atau impor proyek

Aplikasi Next.js baru:

npx create-next-app@latest my-app
cd my-app
npm run dev

Inisialisasi Git dan :

git init
git add -A
git commit -m "init"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

Di Vercel: New Project → Import Git Repository → Deploy.

Vercel secara otomatis mendeteksi (misalnya, Next.js) dan mengatur seperti npm install, npm run build, dan direktori keluaran.

2) Pahami lingkungan

Development: Mesin lokal (npm run dev).

Preview: Setiap PR atau di- ke URL unik seperti `

Production: utama (dapat dikonfigurasi) → `

Inilah inti dari cara menggunakan Vercel secara efisien: perlakukan setiap PR sebagai tautan yang dapat dibagikan.

Konsep Inti yang Akan Anda Gunakan

Variabel lingkungan

Buka Project → Settings → Environment Variables.

Tambahkan variabel untuk Development, Preview, Production secara terpisah.

Di Next.js, ekspos variabel yang aman ke klien dengan awalan NEXT_PUBLIC_.

Contoh:

NEXT_PUBLIC_API_BASE=
DATABASE_URL=postgres://...
JWT_SECRET=supersecret

Gunakan dalam kode:

const api = process.env.NEXT_PUBLIC_API_BASE
const conn = process.env.DATABASE_URL

(Rute API)

Di Next.js, buat pages/api/hello.ts atau app/api/hello/route.ts.

Contoh (App Router):

// app/api/hello/route.ts
import { NextResponse } from 'next/server'
export async function GET {
return NextResponse.json({ message: 'Hello from Vercel Functions!' })
}

Ini di- sebagai dengan yang diminimalkan dan log yang terlihat di Vercel.

Edge Middleware

Gunakan untuk pemeriksaan otentikasi, pengujian A/B, lokalisasi, penulisan ulang, atau aturan / di .

Contoh middleware.ts:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(req: NextRequest) {
const country = req.geo?.country || 'US'
const res = NextResponse.next
res.headers.set('x-country', country)
return res
}

Optimalisasi Gambar dan Aset Statis

Next.js next/image secara otomatis menggunakan Optimalisasi Gambar Vercel.

Letakkan statis di public/. Vercel menyajikan dan menyimpan mereka di .

ISR ()

Bangun ulang hanya halaman yang berubah—tidak perlu penuh.

Di Next.js App Router:

export const revalidate = 60 // seconds

Alur Kerja yang Berskala

Pratinjau sebagai alur kerja produk

ke → bagikan URL pratinjau dengan PM/desain.

Kumpulkan umpan balik dalam konteks. Tidak ada tangkapan layar, hanya fitur langsung.

Gabungkan saat disetujui; Vercel mempromosikan ke produksi secara otomatis jika main diatur sebagai Production.

Monorepo

Vercel mendukung monorepo; atur proyek selama impor.

Gunakan vercel.json untuk mengonfigurasi dan :

{
"buildCommand": "pnpm -w build",
"ignoreCommand": "git diff --quiet HEAD^ HEAD ./apps/web",
"framework": "nextjs"
}

Pengaturan khusus

Timpa perintah di Project → Settings → Build & Development.

Atur Output Directory jika menggunakan seperti Astro (dist) atau Remix.

Cara Menggunakan Vercel dengan Next.js (Titik Manis)

Next.js adalah referensi untuk Vercel, jadi Anda akan mendapatkan DX terbaik di sini.

Fitur App Router seperti Route Handlers, Server Actions, dynamic = 'force-dynamic', dan arahan dipetakan langsung ke infrastruktur Vercel.

Contoh rute API dengan :

// app/api/products/route.ts
import { NextResponse } from 'next/server'
export async function GET {
const data = await fetch(' { next: { revalidate: 3600 } })
return NextResponse.json(await data.json)
}

Contoh kontrol :

export const dynamic = 'force-dynamic' // opt out of static rendering

export const runtime = 'edge'

Ini adalah tuas praktis dalam cara menggunakan Vercel untuk menyeimbangkan kecepatan, kesegaran, dan biaya.

Domain, SSL, dan Pengalihan

Tambahkan domain di bawah Project → Domains. Vercel menyediakan SSL secara otomatis.

Untuk DNS, arahkan CNAME (atau A/ALIAS jika diperlukan) ke target Vercel.

Pengalihan dan penulisan ulang melalui next.config.js atau vercel.json:

// next.config.js
module.exports = {
async redirects {
return lets you chat with AI on any page—handy for generating config snippets, summarizing PR previews, or drafting post-deploy checklists right from the Vercel dashboard.
---
## Next Steps: Ship Something Today
- Create a small Next.js app and deploy it to a preview URL.
- Add a custom domain and try a redirect.
- Introduce one Edge Middleware rule (like a geo header or simple auth gate).
- Hook up error monitoring and check logs after a few test requests.
Once you’ve done this once, you’ll understand not just how to use Vercel, but how to use it to move faster than your process used to allow.
---
## Key Takeaways
- How to use Vercel in practice: connect Git → deploy → preview → merge to prod.
- Lean on built-in features: Edge Middleware, serverless functions, ISR, image optimization.
- Separate envs and automate feedback via previews for every PR.
- Add a domain early; monitor logs and web vitals from day one.
- Optimize cost with caching, ISR, and thoughtful runtime choices.
### FAQ
Q1:What is the fastest way to learn how to use Vercel?
Connect your Git repo, deploy a starter (like Next.js), and explore preview URLs on each push. Then add environment variables, a custom domain, and a simple API route to cover the core workflow.
Q2:How to use Vercel with Next.js for best performance?
Use ISR (`revalidate`), `next/image` optimization, and Edge Middleware for lightweight logic. Cache external fetches and choose edge or serverless runtimes based on workload.
Q3:Can I use Vercel without Next.js?
Yes—Vercel supports frameworks like Astro, SvelteKit, Remix, and Nuxt. Ensure the correct build command and output directory are set, and use `vercel.json` if you need custom routing.
Q4:How do I set environment variables on Vercel?
In the Vercel dashboard, go to Project → Settings → Environment Variables and add values for Development, Preview, and Production. Use `NEXT_PUBLIC_` for variables that must be exposed to the client.
Q5:How to use Vercel for custom domains and SSL?
Add your domain under Project → Domains; Vercel provisions SSL automatically. Point your DNS records (CNAME or A/ALIAS) to Vercel and verify in the dashboard.