Vercel – handy deployment tool dla frontendu i full-stack

Vercel to platforma chmurowa stworzona przez twórców Next.js, która zrewolucjonizowała sposób deploymentu aplikacji frontendowych i full-stack. Dzięki automatycznemu CI/CD, natywnej obsłudze Edge Functions i globalnej sieci CDN, Vercel pozwala deweloperom skupić się na kodzie, a nie na infrastrukturze. W tym artykule poznasz możliwości Vercel i nauczysz się wdrażać aplikacje w kilka minut.

🎯 Czego się nauczysz:

• Konfiguracja projektu na Vercel
• Automatyczny deployment z Git
• Zarządzanie zmiennymi środowiskowymi
• Preview deployments i branch-based workflow
• Serverless Functions i Edge Functions
• Custom domains i SSL
• Analiza wydajności (Speed Insights)
• Best practices i optymalizacja

🚀 Czym jest Vercel?

Vercel to platforma cloudowa typu Platform-as-a-Service (PaaS) zoptymalizowana pod frameworki frontendowe, szczególnie React i Next.js. Zapewnia infrastrukturę do budowania, wdrażania i hostowania aplikacji webowych bez konieczności zarządzania serwerami.

Kluczowe cechy

• Zero-config deployment – automatyczna detekcja frameworka i konfiguracja
• Git-based workflow – każdy push = nowy deployment
• Preview deployments – unikalny URL dla każdego PR
• Edge Network – 100+ lokalizacji na świecie
• Serverless Functions – API bez zarządzania serwerami
• Analytics i Monitoring – wbudowane narzędzia do analizy

⚡ Pierwszy deployment

1. Rejestracja i połączenie z Git

1. Wejdź na vercel.com i zaloguj się (GitHub/GitLab/Bitbucket)
2. Kliknij “Add New Project”
3. Wybierz repozytorium z listy
4. Vercel automatycznie wykryje framework (Next.js, React, Vue, etc.)

2. Konfiguracja projektu

{
  "name": "my-awesome-app",
  "framework": "nextjs",
  "buildCommand": "next build",
  "outputDirectory": ".next",
  "devCommand": "next dev",
  "installCommand": "npm install",
  "regions": ["iad1", "fra1"],
  "env": {
    "CUSTOM_KEY": "custom-value"
  }
}

3. CLI Vercel

# Instalacja CLI
npm i -g vercel

# Logowanie
vercel login

# Deployment z lokalnego projektu
vercel

# Deployment do produkcji
vercel --prod

# Linkowanie istniejącego projektu
vercel link

# Otwarcie dashboard
vercel dashboard

🔧 Zmienne środowiskowe

Vercel umożliwia zarządzanie zmiennymi środowiskowymi na trzy sposoby:

1. Dashboard (UI)

Settings → Environment Variables → Add New

2. CLI

# Dodanie zmiennej
vercel env add DATABASE_URL

# Dodanie zmiennej dla konkretnego środowiska
vercel env add API_KEY production
vercel env add API_KEY preview
vercel env add API_KEY development

# Lista zmiennych
vercel env ls

# Usunięcie zmiennej
vercel env rm DATABASE_URL

3. Plik .env.local (development)

# Lokalne zmienne (nie commituj!)
DATABASE_URL=postgresql://localhost:5432/mydb
API_KEY=sk_test_12345
NEXT_PUBLIC_API_URL=http://localhost:3000/api

🌿 Preview Deployments

Jedną z najpotężniejszych funkcji Vercel są automatyczne preview deployments dla każdego Pull Requesta:

Konfiguracja branchy

Production Branch: main
Preview Branches: * (wszystkie)
Ignored Build Step: git diff --quiet HEAD^ HEAD ./

⚙️ Serverless Functions

Vercel pozwala tworzyć API bez konfiguracji serwera. Wystarczy dodać plik do folderu api/:

Node.js API Route

export default function handler(req, res) {
  const { name = 'World' } = req.query
  
  res.status(200).json({
    message: `Hello ${name}!`,
    timestamp: new Date().toISOString()
  })
}

Python API Route

from http.server import BaseHTTPRequestHandler
import json

class handler(BaseHTTPRequestHandler):
    def do_GET(self):
        self.send_response(200)
        self.send_header('Content-type', 'application/json')
        self.end_headers()
        
        response = {
            'message': 'Hello from Python!',
            'language': 'Python'
        }
        
        self.wfile.write(json.dumps(response).encode())
        return

Edge Functions (szybsze, globalnie)

export const runtime = 'edge'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const name = searchParams.get('name') || 'World'
  
  return new Response(
    JSON.stringify({
      message: `Hello ${name}!`,
      location: request.geo?.city,
      timestamp: Date.now()
    }),
    {
      headers: { 'content-type': 'application/json' }
    }
  )
}

🌐 Custom Domains

Dodanie własnej domeny

1. Dashboard → Project Settings → Domains
2. Wpisz nazwę domeny (np. myapp.com)
3. Vercel poda rekordy DNS do skonfigurowania
4. Dodaj rekordy u swojego rejestratora domeny
5. SSL jest automatycznie (Let’s Encrypt)

Konfiguracja DNS

📊 Analytics i Monitoring

Web Analytics

# Dla Next.js
npm install @vercel/analytics

# W layout.tsx
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Speed Insights

npm install @vercel/speed-insights

# W layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  )
}

💰 Cennik

✅ Best Practices

📋 Podsumowanie komend CLI

🎯 Kiedy używać Vercel?

📚 Bibliografia

1. Vercel. (2026). Vercel Documentation. vercel.com/docs
2. Vercel. (2026). Next.js on Vercel. vercel.com/docs/frameworks/nextjs
3. Vercel. (2026). Edge Functions. vercel.com/docs/functions/edge-functions
4. Vercel. (2026). CLI Reference. vercel.com/docs/cli
5. Vercel. (2026). Environment Variables. vercel.com/docs/concepts/projects/environment-variables