Kako koristiti Vercel: Brzi vodič od prve implementacije 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željeli da implementacija web aplikacije bude više kao spremanje datoteke nego isporuka koda, evo dobrih vijesti: upravo se tako osjeća Vercel kad 'klikne'. U nekoliko minuta možete prijeći s lokalnog razvoja na globalnu aplikaciju s rubnim ubrzanjem, s pregledima za svaki zahtjev za povlačenje i bez DevOpsa kojeg treba nadgledati. Ovaj praktični vodič, usmjeren na rješenja, vodi vas korak po korak kroz korištenje Vercela—pokrivajući postavljanje, okvire poput Next.js, varijable okruženja, serverless funkcije, Edge Middleware, domene, pohranu, mogućnost promatranja i najbolje prakse za produkciju.

Kretat ćemo se brzo, ali dobit ćete zaštitne ograde, kontrolne popise i primjere koje možete kopirati i zalijepiti. Bez obzira implementirate li odredišnu stranicu, Next.js SaaS ili monorepo, naučit ćete osnove za sigurnu isporuku.

Što je Vercel i zašto ga koristiti?

Vercel je platforma za razvoj, pregled i isporuku web aplikacija. Optimizirana je za moderne okvire (posebno Next.js), nudeći:

Trenutne implementacije: Svaki git push stvara jedinstveni URL za pregled.

Globalne performanse: Statički resursi, Edge Middleware i predmemoriranje na rubu.

Serverless funkcije: API rute bez osiguravanja poslužitelja.

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

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

Ako vam je cilj brzina, DX i pouzdanost uz minimalne operativne troškove, učenje korištenja Vercela brzo se isplati.

Postavljanje: Kako koristiti Vercel u 10 minuta

Napravite račun na vercel.com i povežite GitHub/GitLab/Bitbucket.

Uvezite svoj repo (npr. Next.js, React, SvelteKit, Astro, Remix, Nuxt). Vercel automatski detektira okvir i postavke izrade.

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

Postavite varijable okruženja pod Project → Settings → Environment Variables.

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

Dodajte prilagođenu domenu pod Project → Domains i usmjerite DNS.

Pratite izrade, zapisnike i performanse putem nadzorne ploče.

Upravo ste naučili najkraći put za korištenje Vercela. Sada idemo dublje.

Početak rada: Od lokalnog do prve implementacije

1) Stvorite ili uvezite projekt

Nova Next.js aplikacija:

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

Inicijalizirajte Git i gurnite:

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 Vercelu: New Project → Import Git Repository → Deploy.

Vercel automatski detektira okvir (npr. Next.js) i postavlja zadane vrijednosti kao što su npm install, npm run build i izlazni direktoriji.

2) Razumijevanje okruženja

Razvoj: Lokalno računalo (npm run dev).

Pregled: Svaki PR ili push grane implementira se na jedinstveni URL poput `

Produkcija: Glavna grana (konfigurabilna) → `

Ovo je srž učinkovitog korištenja Vercela: tretirajte svaki PR kao poveznicu za dijeljenje.

Osnovni koncepti koje ćete zapravo koristiti

Varijable okruženja

Idite na Project → Settings → Environment Variables.

Dodajte varijable za Development, Preview, Production odvojeno.

U Next.js, izložite sigurne varijable klijentu s prefiksom NEXT_PUBLIC_.

Primjer:

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

Koristite u kodu:

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

Serverless Functions (API rute)

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

Primjer (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 implementiraju kao serverless funkcije s minimiziranim hladnim pokretanjima i zapisnicima vidljivim na nadzornoj ploči Vercela.

Edge Middleware

Koristite za provjere autentičnosti, A/B testiranje, lokalizaciju, preusmjeravanja ili pravila za botove/firewall na rubu.

Primjer 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 Vercelovu optimizaciju slike.

Stavite statičke datoteke u public/. Vercel ih poslužuje i predmemorira na rubu.

ISR (Incremental Static Regeneration)

Ponovno izgradite samo stranice koje se mijenjaju—nije potrebno potpuno ponovno implementiranje.

U Next.js App Router:

export const revalidate = 60 // seconds

Implementacija radnih procesa koji se mogu skalirati

Pregledi grane kao tijek rada proizvoda

Push na granu značajke → podijelite URL za pregled s PM/dizajnom.

Prikupite povratne informacije u kontekstu. Bez snimki zaslona, samo značajka uživo.

Spojite kada je odobreno; Vercel automatski promovira u produkciju ako je main postavljena kao Production.

Monorepos

Vercel podržava monorepos; postavite korijen projekta tijekom uvoza.

Koristite vercel.json za konfiguriranje izrada i ignoriranja:

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

Prilagođene postavke izrade

Poništite naredbe za izradu u Project → Settings → Build & Development.

Postavite Output Directory ako koristite okvire poput Astra (dist) ili Remix.

Kako koristiti Vercel s Next.js (Idealno mjesto)

Next.js je referentni okvir za Vercel, tako da ćete ovdje dobiti najbolji DX.

Značajke App Routera kao što su Route Handlers, Server Actions, dynamic = 'force-dynamic' i direktive za predmemoriranje izravno se preslikavaju u Vercel infrastrukturu.

Primjer API rute s predmemoriranjem:

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

Primjer dinamičke kontrole renderiranja:

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

Edge runtime:

export const runtime = 'edge'

Ovo su praktične poluge u korištenju Vercela za uravnoteženje brzine, svježine i troškova.

Domene, SSL i preusmjeravanja

Dodajte domenu pod Project → Domains. Vercel automatski osigurava SSL.

Za DNS, usmjerite CNAME (ili A/ALIAS kada je potrebno) na Vercelovu metu.

Preusmjeravanja 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.