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.

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.

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.

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.

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.

Cara Menggunakan Vercel: Panduan Pantas dari Pelancaran Pertama ke Pengeluaran

Jika anda pernah berharap pelancaran aplikasi web terasa lebih seperti menyimpan fail daripada menghantar kod, ini berita baiknya: itulah sebenarnya perasaan menggunakan apabila semuanya berjalan lancar. Dalam beberapa minit, anda boleh beralih daripada pembangunan tempatan kepada aplikasi global yang dipercepatkan dengan dengan pratonton untuk setiap permintaan tarikan () dan tanpa perlu bersusah payah dengan DevOps. Panduan praktikal dan berorientasikan penyelesaian ini membimbing anda langkah demi langkah tentang cara menggunakan —meliputi persediaan, rangka kerja seperti Next.js, pemboleh ubah persekitaran, fungsi tanpa pelayan, , domain, storan, kebolehcerapan dan amalan terbaik pengeluaran.

Kita akan bergerak pantas, tetapi anda akan mendapat panduan, senarai semak dan contoh yang boleh anda salin dan tampal. Sama ada anda melancarkan halaman pendaratan, SaaS Next.js atau monorepo, anda akan mempelajari perkara penting untuk menghantar dengan yakin.

Apakah Itu Vercel dan Mengapa Menggunakannya?

ialah platform untuk membangunkan, melihat pratonton dan menghantar aplikasi web. Ia dioptimumkan untuk rangka kerja moden (terutamanya Next.js), menawarkan:

Pelancaran segera: Setiap git push mencipta URL pratonton yang unik.

Prestasi global: Aset statik, dan penimbalan () di .

Fungsi tanpa pelayan: Laluan API tanpa memperuntukkan pelayan.

Pratonton tanpa CI: Binaan automatik + pratonton setiap PR.

Sokongan Next.js kelas pertama: Pengoptimuman Imej, , ISR ().

Jika matlamat anda ialah kelajuan, DX dan kebolehpercayaan dengan operasi yang minimum, mempelajari cara menggunakan akan membuahkan hasil dengan cepat.

Persediaan: Cara Menggunakan Vercel dalam 10 Minit

Buat akaun di vercel.com dan sambungkan GitHub/GitLab/Bitbucket.

Import repo anda (cth., Next.js, React, SvelteKit, Astro, Remix, Nuxt). mengesan rangka kerja dan tetapan binaan secara automatik.

Klik Lancar → membina dan memberikan anda URL pratonton yang unik.

Tetapkan pemboleh ubah persekitaran di bawah Projek → Tetapan → Pemboleh Ubah Persekitaran.

Naik taraf ke pengeluaran dengan menetapkan Cabang Pengeluaran (biasanya main) dan menggabungkan PR anda.

Tambah domain tersuai di bawah Projek → Domain dan halakan DNS.

Pantau binaan, log dan prestasi melalui papan pemuka.

Anda baru sahaja mempelajari jalan terpendek untuk menggunakan . Sekarang mari kita mendalami lagi.

Bermula: Daripada Tempatan kepada Pelancaran Pertama

1) Cipta atau import projek

Aplikasi Next.js baharu:

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

Mulakan Git dan tolak:

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

Dalam : Projek Baharu → Import Repositori Git → Lancar.

mengesan rangka kerja secara automatik (cth., Next.js) dan menetapkan lalai seperti npm install, npm run build dan direktori output.

2) Memahami persekitaran

Pembangunan: Mesin tempatan (npm run dev).

Pratonton: Setiap PR atau tolakan cabang dilancarkan ke URL yang unik seperti `

Pengeluaran: Cabang utama (boleh dikonfigurasikan) → `

Inilah teras cara menggunakan dengan cekap: anggap setiap PR sebagai pautan pentas yang boleh dikongsi.

Konsep Teras Yang Akan Anda Gunakan

Pemboleh ubah persekitaran

Pergi ke Projek → Tetapan → Pemboleh Ubah Persekitaran.

Tambah pemboleh ubah untuk Pembangunan, Pratonton, Pengeluaran secara berasingan.

Dalam Next.js, dedahkan pemboleh ubah selamat kepada pelanggan dengan awalan NEXT_PUBLIC_.

Contoh:

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

Gunakan dalam kod:

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

Fungsi Tanpa Pelayan (Laluan API)

Dalam Next.js, cipta pages/api/hello.ts atau app/api/hello/route.ts.

Contoh (Penghala Aplikasi):

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

Ini dilancarkan sebagai fungsi tanpa pelayan dengan permulaan sejuk yang diminimumkan dan log yang boleh dilihat dalam papan pemuka .

Gunakan untuk semakan pengesahan, ujian A/B, penyetempatan, penulisan semula atau peraturan bot/firewall 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
}

Pengoptimuman Imej dan Aset Statik

Next.js next/image secara automatik menggunakan Pengoptimuman Imej .

Letakkan fail statik dalam public/. menyediakan dan menimbalnya di .

ISR ()

Bina semula hanya halaman yang berubah—tidak perlu pelancaran semula penuh.

Dalam Penghala Aplikasi Next.js:

export const revalidate = 60 // seconds

Lancar Alur Kerja Yang Berskala

Pratonton cabang sebagai alur kerja produk

Tolak ke cabang ciri → kongsi URL pratonton dengan PM/reka bentuk.

Kumpul maklum balas dalam konteks. Tiada tangkapan skrin, hanya ciri langsung.

Gabung apabila diluluskan; dinaikkan ke pengeluaran secara automatik jika main ditetapkan sebagai Pengeluaran.

Monorepo

menyokong monorepo; tetapkan akar projek semasa import.

Gunakan vercel.json untuk mengkonfigurasi binaan dan abaikan:

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

Tetapan binaan tersuai

Gantikan perintah binaan dalam Projek → Tetapan → Binaan & Pembangunan.

Tetapkan Direktori Output jika menggunakan rangka kerja seperti Astro (dist) atau Remix.

Cara Menggunakan Vercel dengan Next.js (Titik Manis)

Next.js ialah rangka kerja rujukan untuk , jadi anda akan mendapat DX terbaik di sini.

Ciri Penghala Aplikasi seperti Pengendali Laluan, Tindakan Pelayan, dynamic = 'force-dynamic' dan arahan penimbalan dipetakan terus ke infra .

Contoh laluan API dengan penimbalan:

// 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 kawalan perenderan dinamik:

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

Masa jalan :

export const runtime = 'edge'

Ini ialah tuas praktikal dalam cara menggunakan untuk mengimbangi kelajuan, kesegaran dan kos.

Domain, SSL dan Lencongan

Tambah domain di bawah Projek → Domain. memperuntukkan SSL secara automatik.

Untuk DNS, halakan CNAME (atau A/ALIAS apabila diperlukan) ke sasaran .

Lencongan dan penulisan semula melalui next.config.js atau vercel.json:

// next.config.js
module.exports = {
async redirects {
return membolehkan anda bersembang dengan AI pada mana-mana halaman—berguna untuk menjana coretan konfigurasi, meringkaskan pratonton PR atau merangka senarai semak selepas pelancaran terus daripada papan pemuka .
---
## Langkah Seterusnya: Hantar Sesuatu Hari Ini
- Cipta aplikasi Next.js kecil dan lancarkannya ke URL pratonton.
- Tambah domain tersuai dan cuba lencongan.
- Perkenalkan satu peraturan  (seperti pengepala geo atau get pengesahan ringkas).
- Sambungkan pemantauan ralat dan semak log selepas beberapa permintaan ujian.
Sebaik sahaja anda melakukan ini sekali, anda akan memahami bukan sahaja cara menggunakan , tetapi cara menggunakannya untuk bergerak lebih pantas daripada yang dibenarkan oleh proses anda dahulu.
---
## Perkara Utama
- Cara menggunakan  dalam amalan: sambungkan Git → lancar → pratonton → gabung ke prod.
- Bergantung pada ciri terbina dalam: , fungsi tanpa pelayan, ISR, pengoptimuman imej.
- Asingkan env dan automatikkan maklum balas melalui pratonton untuk setiap PR.
- Tambah domain lebih awal; pantau log dan  dari hari pertama.
- Optimumkan kos dengan penimbalan, ISR dan pilihan masa jalan yang bernas.
### Soalan Lazim
S1:Apakah cara terpantas untuk mempelajari cara menggunakan ?
Sambungkan repo Git anda, lancarkan pemula (seperti Next.js) dan terokai URL pratonton pada setiap tolakan. Kemudian tambahkan pemboleh ubah persekitaran, domain tersuai dan laluan API ringkas untuk meliputi alur kerja teras.
S2:Cara menggunakan  dengan Next.js untuk prestasi terbaik?
Gunakan ISR (`revalidate`), pengoptimuman `next/image` dan  untuk logik ringan. Timbal ambilan luaran dan pilih  atau masa jalan tanpa pelayan berdasarkan beban kerja.
S3:Bolehkah saya menggunakan  tanpa Next.js?
Ya— menyokong rangka kerja seperti Astro, SvelteKit, Remix dan Nuxt. Pastikan perintah binaan dan direktori output yang betul ditetapkan dan gunakan `vercel.json` jika anda memerlukan penghalaan tersuai.
S4:Bagaimanakah cara saya menetapkan pemboleh ubah persekitaran pada ?
Dalam papan pemuka , pergi ke Projek → Tetapan → Pemboleh Ubah Persekitaran dan tambahkan nilai untuk Pembangunan, Pratonton dan Pengeluaran. Gunakan `NEXT_PUBLIC_` untuk pemboleh ubah yang mesti didedahkan kepada pelanggan.
S5:Cara menggunakan  untuk domain tersuai dan SSL?
Tambah domain anda di bawah Projek → Domain;  memperuntukkan SSL secara automatik. Halakan rekod DNS anda (CNAME atau A/ALIAS) ke  dan sahkan dalam papan pemuka.