Uitleg — Waarom Vercel?

Vercel is het bedrijf achter Next.js. Ze bieden gratis hosting speciaal voor Next.js apps.

Voordelen van Vercel

  • Gratis voor persoonlijke projecten
  • Automatisch HTTPS — geen configuratie nodig
  • Git-integratie — push naar GitHub = automatisch live
  • Geen server beheer — Vercel regelt alles
  • Previews — elke branch krijgt een eigen URL

Stap 1 — Controleer .gitignore

Zorg dat gevoelige bestanden niet op GitHub komen:

# .gitignore — check of dit erin staat
.env.local
node_modules/
.next/

⚠️ Nooit .env.local op GitHub!

Je MONGO_URI staat in .env.local. Als dit op GitHub komt, kan iemand toegang krijgen tot je database. Controleer dit goed!

Stap 2 — Test de productie build lokaal

npm run build

✅ Verwacht resultaat

Je ziet een lijst van alle routes en geen errors. Als er errors zijn, fix ze eerst!

Stap 3 — Zet je project op GitHub

Vercel deployt automatisch vanuit GitHub. Zorg eerst dat je project op GitHub staat.

Nieuw repository aanmaken

  1. Ga naar github.com
  2. Klik op "New" om een nieuw repository aan te maken
  3. Naam: workout-tracker
  4. Kies Private (veiliger voor projecten met databases)
  5. Klik "Create repository"

Project pushen

# In je project map:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/jouwnaam/workout-tracker.git
git push -u origin main

Stap 4 — Importeer je project in Vercel

  1. Ga naar vercel.com
  2. Maak gratis account aan via GitHub (aanraden)
  3. Klik "Add New Project"
  4. Klik "Import" naast je workout-tracker repository
  5. Vercel detecteert Next.js automatisch — geen configuratie nodig
  6. Klik nog NIET op "Deploy" — eerst omgevingsvariabelen instellen!

Stap 5 — Voeg omgevingsvariabelen toe en deploy

Je .env.local staat niet op GitHub. Je moet de variabelen handmatig toevoegen in Vercel.

In het "Configure Project" scherm:

  1. Scroll naar "Environment Variables"
  2. Voeg toe:
    • Name: MONGO_URI
    • Value: jouw volledige MongoDB connection string
  3. Klik "Add"
  4. Nu klik je op "Deploy"

✅ Verwacht resultaat

Na ~1 minuut is je app live! Vercel geeft je een URL zoals:
https://workout-tracker-abc123.vercel.app

Variabelen later aanpassen

Ga naar je project op Vercel → Settings → Environment Variables. Na het aanpassen moet je opnieuw deployen.

Stap 6 — Fix de URLs voor productie

In je code gebruik je nu http://localhost:3000/api/... voor fetch requests. Dit werkt niet meer in productie!

Oplossing: omgevingsvariabele voor de URL

Voeg toe aan .env.local:

# .env.local
MONGO_URI=mongodb+srv://...
NEXT_PUBLIC_API_URL=http://localhost:3000

Op Vercel voeg je ook NEXT_PUBLIC_API_URL toe, maar dan met je Vercel URL:

NEXT_PUBLIC_API_URL=https://workout-tracker-abc123.vercel.app

Update je fetch calls in Server Components:

// Gebruik process.env.NEXT_PUBLIC_API_URL
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/workouts`, {
  cache: 'no-store',
});

💡 NEXT_PUBLIC_ prefix

Variabelen met NEXT_PUBLIC_ zijn zichtbaar in zowel server als client code. Zonder prefix zijn ze alleen op de server beschikbaar. Gebruik NEXT_PUBLIC_ alleen voor niet-gevoelige data.

Alternatief: relatieve paden

In Server Components kun je ook relatieve paden gebruiken als je in hetzelfde Next.js project blijft. In plaats van http://localhost:3000/api/workouts kun je direct de database aanroepen vanuit de API route — dan heb je helemaal geen fetch nodig. Dat is de meest efficiënte aanpak.

Stap 7 — Updates deployen

Na de eerste deployment is updaten heel simpel:

# Wijzigingen opslaan
git add .
git commit -m "Voeg verwijder functie toe"
git push

✅ Automatisch!

Na elke push naar de main branch deployt Vercel automatisch je nieuwste versie. Na ~1 minuut is de update live.

Checklist

✅ Check of je hebt:

  • .env.local staat in .gitignore
  • npm run build geeft geen errors
  • Project staat op GitHub
  • Vercel account aangemaakt
  • Repository geïmporteerd in Vercel
  • MONGO_URI ingesteld als Environment Variable
  • App live op een vercel.app URL
  • Workouts zichtbaar in productie

🎉 Gefeliciteerd!

Je hebt een complete fullstack Workout Tracker gebouwd en live gezet met Next.js!

Wat je hebt gebouwd:

  • ✅ Next.js App Router project
  • ✅ File-based routing met dynamische routes
  • ✅ Server & Client Components
  • ✅ API Routes met MongoDB
  • ✅ CRUD: workouts aanmaken, lezen en verwijderen
  • ✅ Gestyled met Tailwind CSS
  • ✅ Live op Vercel

← Terug naar overzicht