Kako koristiti Vercel: Brzi vodič od prvog raspoređivanja do produkcije

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.

Ako ste ikada poželeli da raspoređivanje veb aplikacije bude više kao čuvanje fajla nego isporuka koda, evo dobrih vesti: upravo takav je osećaj sa Vercel-om kada se sve poklopi. Za nekoliko minuta, možete preći od lokalnog razvoja do globalne aplikacije sa edge ubrzanjem, sa pregledima za svaki pull request i bez DevOps-a za nadgledanje. Ovaj praktičan, rešenjima orijentisan vodič vas korak po korak vodi kroz to kako koristiti Vercel – pokrivajući podešavanje, framework-e kao što je Next.js, promenljive okruženja, serverless funkcije, Edge Middleware, domene, skladištenje, opservabilnost i najbolje prakse za produkciju.

Kretaćemo se brzo, ali ćete dobiti smernice, kontrolne liste i primere koje možete kopirati i nalepiti. Bez obzira da li raspoređujete landing stranicu, Next.js SaaS ili monorepo, naučićete osnove za pouzdanu isporuku.

Šta je Vercel i zašto ga koristiti?

Vercel je platforma za razvoj, pregled i isporuku veb aplikacija. Optimizovan je za moderne framework-e (posebno Next.js), nudeći:

Trenutna raspoređivanja: Svaki git push kreira jedinstveni URL za pregled.

Globalne performanse: Statički resursi, Edge Middleware i keširanje na edge-u.

Serverless funkcije: API rute bez obezbeđivanja servera.

Pregledi bez CI: Automatska izrada + pregled po PR-u.

Prvoklasna Next.js podrška: Optimizacija slike, Middleware, ISR (Incremental Static Regeneration).

Ako vam je cilj brzina, DX i pouzdanost uz minimalne operativne troškove, učenje kako koristiti Vercel se brzo isplati.

Podešavanje: Kako koristiti Vercel za 10 minuta

Napravite nalog na vercel.com i povežite GitHub/GitLab/Bitbucket.

Uvezite svoj repo (npr. Next.js, React, SvelteKit, Astro, Remix, Nuxt). Vercel automatski detektuje framework i podešavanja za izradu.

Kliknite na Deploy → Vercel izrađuje i daje vam jedinstveni URL za pregled.

Podesite promenljive okruženja pod Project → Settings → Environment Variables.

Promovišite u produkciju postavljanjem Production Branch (obično main) i spajanjem vašeg PR-a.

Dodajte prilagođeni domen pod Project → Domains i usmerite DNS.

Pratite izrade, logove i performanse putem kontrolne table.

Upravo ste naučili najkraći put za korišćenje Vercel-a. Sada idemo dublje.

Početak rada: Od lokalnog do prvog raspoređivanja

1) Kreirajte ili uvezite projekat

Nova Next.js aplikacija:

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

Inicijalizujte Git i pošaljite:

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

U Vercel-u: New Project → Import Git Repository → Deploy.

Vercel automatski detektuje framework (npr. Next.js) i postavlja podrazumevane vrednosti kao što su npm install, npm run build i izlazni direktorijumi.

2) Razumevanje okruženja

Razvoj: Lokalna mašina (npm run dev).

Pregled: Svaki PR ili branch push se raspoređuje na jedinstveni URL kao `

Produkcija: Glavni branch (konfigurabilno) → `

Ovo je suština kako efikasno koristiti Vercel: tretirajte svaki PR kao link za deljenje staging okruženja.

Ključni koncepti koje ćete zaista koristiti

Promenljive okruženja

Idite na Project → Settings → Environment Variables.

Dodajte promenljive za Development, Preview, Production odvojeno.

U Next.js, izložite bezbedne promenljive klijentu sa prefiksom NEXT_PUBLIC_.

Primer:

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

Upotreba u kodu:

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

Serverless funkcije (API rute)

U Next.js, kreirajte pages/api/hello.ts ili app/api/hello/route.ts.

Primer (App Router):

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

Ove se raspoređuju kao serverless funkcije sa minimizovanim hladnim startovima i logovima vidljivim na Vercel kontrolnoj tabli.

Edge Middleware

Koristite za provere autentifikacije, A/B testiranje, lokalizaciju, prepisivanje ili pravila za botove/firewall na edge-u.

Primer 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
}

Optimizacija slike i statički resursi

Next.js next/image automatski koristi Vercel-ovu optimizaciju slike.

Stavite statičke fajlove u public/. Vercel ih servira i kešira na edge-u.

ISR (Incremental Static Regeneration)

Ponovo izgradite samo stranice koje se menjaju – nije potrebno potpuno ponovno raspoređivanje.

U Next.js App Router:

export const revalidate = 60 // seconds

Radni tokovi raspoređivanja koji se skaliraju

Pregledi branch-a kao proizvodni radni tok

Pošaljite na feature branch → podelite URL za pregled sa PM/dizajnerom.

Prikupite povratne informacije u kontekstu. Nema screenshot-ova, samo funkcija uživo.

Spojite kada bude odobreno; Vercel automatski promoviše u produkciju ako je main postavljen kao Production.

Monorepos

Vercel podržava monorepos; postavite root projekta tokom uvoza.

Koristite vercel.json za konfigurisanje izrada i ignorisanja:

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

Prilagođena podešavanja izrade

Zamenite komande za izradu u Project → Settings → Build & Development.

Postavite Output Directory ako koristite framework-e kao što su Astro (dist) ili Remix.

Kako koristiti Vercel sa Next.js (Idealno mesto)

Next.js je referentni framework za Vercel, tako da ćete ovde dobiti najbolji DX.

Funkcije App Router-a kao što su Route Handlers, Server Actions, dynamic = 'force-dynamic' i direktive za keširanje se direktno mapiraju na Vercel infrastrukturu.

Primer API rute sa keširanjem:

// 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)
}

Primer kontrole dinamičkog renderovanja:

export const dynamic = 'force-dynamic' // isključite statičko renderovanje

Edge runtime:

export const runtime = 'edge'

Ovo su praktične poluge u načinu korišćenja Vercel-a za balansiranje brzine, svežine i troškova.

Domeni, SSL i preusmeravanja

Dodajte domen pod Project → Domains. Vercel automatski obezbeđuje SSL.

Za DNS, usmerite CNAME (ili A/ALIAS kada je potrebno) na Vercel-ov target.

Preusmeravanja i prepisivanja putem next.config.js ili 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.