React Academy · Les

Deployen naar Vercel: zero-config en preview-URL's

Koppel een GitHub-repository aan Vercel, configureer omgevingsvariabelen en gebruik preview-deployments.

Les 1 van 413 stappen

Deployen naar Vercel: zero-config en preview-URL's is een gratis React Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.

Waarom Vercel?

Vercel is het platform dat door het Next.js-team is gebouwd. Het biedt implementatie zonder configuratie: koppel een GitHub-opslagplaats en Vercel detecteert automatisch het raamwerk, bouwt het project en implementeert het bij elke push.

Een opslagplaats koppelen

Importeer een GitHub-, GitLab- of Bitbucket-opslagplaats vanuit het Vercel-dashboard. Vercel detecteert het raamwerk (Next.js, Vite of CRA) en configureert de bouwinstellingen automatisch.

Projectinstellingen

Vercel detecteert automatisch: het raamwerk, de bouwopdracht (npm run build), de uitvoermap (.next, dist) en de installatieopdracht (npm install). Overschrijf deze instellingen indien nodig in de projectinstellingen.

Omgevingsvariabelen

Voeg omgevingsvariabelen toe in het Vercel-dashboard onder Projectinstellingen → Omgevingsvariabelen. Stel verschillende waarden in voor de omgevingen Productie, Voorbeeld en Ontwikkeling.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Voorbeeldimplementaties

Elke push naar een Git-branch en elk pullrequest krijgt een unieke voorbeeld-URL (bijvoorbeeld myapp-git-feature-xyz.vercel.app). Deel die URL ter beoordeling voordat je samenvoegt — er is geen handmatige testomgeving nodig.

Aangepaste domeinen

Voeg een aangepast domein toe in het Vercel-dashboard. Verwijs je DNS (A-record of CNAME) naar de IP-adressen van Vercel en Vercel regelt automatisch de uitgifte van SSL-certificaten.

Configuratie van vercel.json

Verfijn het implementatiegedrag: omleidingen, kopteksten, herschrijvingen en regiokeuze.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

Vercel CLI

Gebruik de Vercel CLI om vanuit de terminal te implementeren, omgevingsvariabelen lokaal op te halen en projecten te beheren.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

Serverloze functies

Bestanden in api/ (Pages Router) of app/api/*/route.ts (App Router) worden op Vercel automatisch geïmplementeerd als serverloze functies in Vercels edge- of Node.js-uitvoeringsomgeving.

Implementatiehaken

Maak implementatiehaken (webhook-URL's) om implementaties vanuit externe diensten te starten — handig voor wijzigingen in CMS-inhoud waarna de website opnieuw moet worden geïmplementeerd.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

Implementatie van een monorepo

Stel in een Nx- of Turborepo-monorepo de hoofdmap van Vercel in op de map van de specifieke applicatie en configureer de bouwopdracht om de taakuitvoerder van de monorepo te gebruiken.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

Snelle controle

Wat is een Vercel-voorbeeldimplementatie?

Beantwoord dit in de interactieve les

Samenvatting

Koppel een Git-opslagplaats aan Vercel voor implementaties zonder configuratie. Elke branch krijgt een voorbeeld-URL. Beheer omgevingsvariabelen per omgeving in het dashboard, gebruik vercel.json voor omleidingen en kopteksten en de Vercel CLI voor implementaties vanuit de terminal en het ophalen van omgevingsvariabelen.

Gratis beginnen

Leer React met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 88
Lessen: 324

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Deployen naar Vercel: zero-config en preview-URL's” gratis?

Ja — de volledige tekst van “Deployen naar Vercel: zero-config en preview-URL's” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.

Wat leer ik in “Deployen naar Vercel: zero-config en preview-URL's”?

Koppel een GitHub-repository aan Vercel, configureer omgevingsvariabelen en gebruik preview-deployments. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met React Academy te beginnen?

Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Deployen naar Vercel: zero-config en preview-URL's”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over React Academy?

Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

Deployen naar Vercel: zero-config en preview-URL's
Een React-SPA hosten op AWS S3 en CloudFront
Een React/Next.js-app containeriseren
GitHub Actions CI/CD voor React

← Terug naar React Academy