Vercel deployment průvodce: Jak nasadit web bez DevOps [2026]

Co je Vercel a proč ho používat

Vercel je cloudová platforma pro hosting moderních webových aplikací. Vznikla jako firma stojící za frameworkem Next.js, ale dnes podporuje prakticky jakoukoli frontendovou technologii.

Proč si vybírat zrovna Vercel?

Za prvé, automatický deployment z Gitu. Každý push do repozitáře automaticky spustí nový build a deploy. Za druhé, globální CDN. Váš web se servuje z desítek lokací po celém světě, takže je rychlý všude. Za třetí, preview deploys. Každý pull request dostane vlastní URL, kde si můžete změny otestovat před mergem do produkce. A za čtvrté, generous free tier. Pro osobní projekty a MVP je zadarmo.

Pro vibecodery je Vercel ideální, protože se skvěle integruje s tech stackem, který AI nástroje generují: React, Next.js, Vite, Tailwind CSS. Pokud vám Lovable nebo Cursor vygeneroval projekt, je velká šance, že ho na Vercel nasadíte bez jediné změny v kódu.

Předpoklady

Než začneme, budete potřebovat:

• Git repozitář s vaším projektem (GitHub, GitLab nebo Bitbucket). Pokud používáte Lovable, projekt už na GitHubu máte. U Cursoru nebo Bolt.new si repozitář vytvoříte přes git init a push na GitHub.
• Účet na Vercelu (vytvoříme v dalším kroku).
• Základní znalost práce s prohlížečem. Žádný terminál není povinný, i když si ukážeme i CLI variantu.

Krok 1: Registrace na Vercelu

Přejděte na vercel.com a klikněte na "Start Deploying". Doporučuji se registrovat přes GitHub účet, protože tím rovnou propojíte přístup k vašim repozitářům.

Po přihlášení se ocitnete na dashboardu, který je zatím prázdný. To se za chvíli změní.

Důležitá poznámka k plánům: Free plan (Hobby) umožňuje neomezené deploye osobních projektů. Pro komerční použití nebo týmovou práci je Pro plan za $20/měsíc. Pro MVP a testování plně stačí Hobby.

Krok 2: Import projektu

Na dashboardu kliknete "Add New..." a vyberete "Project". Vercel vám zobrazí seznam vašich GitHub repozitářů.

Najdete svůj projekt a kliknete "Import". Pokud repozitář nevidíte, je možné, že Vercel nemá přístup. V tom případě kliknete na "Adjust GitHub App Permissions" a povolíte přístup k danému repozitáři.

Po importu se zobrazí konfigurační obrazovka. Pro většinu vibecoding projektů nemusíte nic měnit. Vercel automaticky detekuje framework (React, Next.js, Vite) a nastaví správný build command a output directory.

Typické automatické nastavení pro Vite projekt:

• Build Command: npm run build
• Output Directory: dist
• Install Command: npm install

Pro Next.js: Build Command: next build, Output Directory: .next.

Pokud používáte Lovable, framework je obvykle Vite + React a Vercel ho rozpozná automaticky.

Krok 3: První deployment

Kliknete "Deploy" a Vercel začne buildovat váš projekt. V reálném čase vidíte logy z buildu. Celý proces trvá obvykle 30 až 90 sekund.

Po úspěšném buildu dostanete URL ve formátu nazev-projektu.vercel.app. Kliknutím ověříte, že všechno funguje.

Co dělat, když build selže?

Nejčastější problémy:

• Chybějící environment variables. Pokud váš projekt používá Supabase, API klíče nebo jiné externí služby, build selže, protože tyto proměnné nejsou nastavené. Řešení je v kroku 5.
• TypeScript chyby. AI nástroje občas generují kód s TypeScript warningy, které se lokálně ignorují, ale Vercel je striktnější.
• Chybějící závislosti. Ověření, že všechny použité balíčky jsou v package.json jako dependencies.

Krok 4: Custom doména

Vercel.app subdoména je skvělá pro testování, ale pro ostrý provoz chcete vlastní doménu.

Na dashboardu projektu přejdete do Settings → Domains. Zadejte svou doménu a klikněte Add.

Vercel vám zobrazí DNS záznamy, které je potřeba nastavit u vašeho registrára domén. Obvykle jsou dva způsoby:

• CNAME záznam: Použijete, pokud chcete nasměrovat subdoménu (např. www). Hodnota bude cname.vercel-dns.com.
• A záznam: Použijete pro root doménu (bez www). IP adresa bude 76.76.21.21.

U českých registrárů jako Wedos nebo Forpsi najdete DNS nastavení v administraci domény. Změna DNS se propaguje během minut až hodin.

Po nastavení DNS se Vercel automaticky postará o SSL certifikát (Let's Encrypt). Váš web bude dostupný přes HTTPS bez jakékoliv konfigurace z vaší strany.

Krok 5: Environment variables

Většina moderních aplikací používá environment variables pro citlivé údaje: API klíče, databázové připojení, tokeny třetích stran.

V nastavení projektu (Settings → Environment Variables) přidáváte proměnné jako klíčové páry.

Důležité je rozlišovat prostředí. Vercel nabízí tři:

• Production — proměnné dostupné na hlavní doméně
• Preview — proměnné dostupné na preview deployích
• Development — proměnné pro lokální vývoj přes vercel dev

Pro typický Lovable projekt s Supabase budete potřebovat: VITE_SUPABASE_URL a VITE_SUPABASE_ANON_KEY.

Pozor na prefix. Vite projekty vyžadují prefix VITE_ u proměnných, které mají být dostupné v prohlížeči. Next.js používá NEXT_PUBLIC_.

Krok 6: Preview deploys a Git workflow

Preview deploys jsou jedna z nejsilnějších features Vercelu. Každý pull request na GitHubu automaticky dostane vlastní deployment s unikátní URL.

Workflow vypadá takto:

1. Vytvoříte novou větev v Gitu
2. Uděláte změny a pushnete
3. Otevřete pull request na GitHubu
4. Vercel automaticky vytvoří preview deploy a přidá odkaz přímo do pull requestu

Po mergi do main branch se automaticky spustí produkční deploy.

Krok 7: Vercel CLI pro pokročilé

Pokud preferujete terminál, Vercel nabízí CLI nástroj.

npm install -g vercel
vercel login
vercel
vercel --prod

Krok 8: Monitoring a analytics

Vercel Analytics (základní varianta zdarma) ukazuje návštěvnost, rychlost načítání a Core Web Vitals. Zapnete ho v nastavení projektu pod záložkou Analytics.

Pro detailnější analytiku doporučuji připojit Google Analytics 4 (GA4).

Tipy a best practices

• Nechte zapnutý automatický deployment.
• Používejte preview deploys pro větší změny.
• Nastavte si notifikace.
• Optimalizujte build čas.
• Držte environment variables oddělené od kódu.

Vercel vs ostatní: krátké srovnání

Nejčastější problémy a jejich řešení

• 404 chyba po nasazení SPA: React SPA s routingem může ukazovat 404 při přímo otevřených URL. Řešení: přidejte soubor vercel.json s rewrite pravidlem {"rewrites": [{"source": "/(.*)", "destination": "/index.html"}]}.
• Build timeout: Free plan má limit 45 minut na build.
• CORS chyby: Použít Vercel Serverless Functions jako proxy.
• Staré cachované verze: Po změně environment variables použijte "Redeploy".

Závěr

Vercel udělal z deploymentu webových aplikací něco, co zvládne každý. Jako vibecoder nepotřebujete rozumět Dockeru, nginxu ani CI/CD pipeline. Stačí připojit repozitář, nastavit pár proměnných a váš projekt je online.

Klíčové je začít jednoduše. První deployment udělejte přes webové rozhraní bez jakýchkoli úprav. Pak postupně přidávejte custom doménu, environment variables a využívejte preview deploys.

Nejlepší způsob, jak se Vercel naučit, je ho používat. Vezměte svůj poslední vibecoding projekt a nasaďte ho. Za 5 minut máte web online a můžete začít sbírat zpětnou vazbu od reálných uživatelů.

Pokud hledáte další návody, podívejte se na Lovable návod pro začátečníky, Bolt.new návod nebo velké srovnání vibecoding nástrojů.