fix: add les 11

v2-klasB/Les02-OpenCode/Les02-Lesstof.md

@@ -16,9 +16,10 @@
 5. [`opencode.json` — config & permissies](#5-opencodejson--config--permissies)
 6. [Plugins & `opencode-worktree`](#6-plugins--opencode-worktree)
 7. [De scroll-animatie stack (Next.js 16)](#7-de-scroll-animatie-stack)
-8. [Project setup van A tot Z](#8-project-setup-van-a-tot-z)
-9. [Workflow patterns](#9-workflow-patterns)
-10. [Bronnen](#10-bronnen)
+8. [Vercel & Preview Deployments](#8-vercel--preview-deployments)
+9. [Project setup van A tot Z](#9-project-setup-van-a-tot-z)
+10. [Workflow patterns](#10-workflow-patterns)
+11. [Bronnen](#11-bronnen)
 
 ---
 
@@ -479,7 +480,88 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 ---
 
-## 8. Project setup van A tot Z
+## 8. Vercel & Preview Deployments
+
+Vercel maakt **automatisch een unieke URL** voor elke branch die je naar GitHub pusht. Voor scroll-storytelling is dit goud — animaties moet je *zien* om over te oordelen.
+
+### Hoe het werkt
+
+| Branch | Type deploy | URL pattern |
+|--------|-------------|-------------|
+| `main` | Production | `jouw-app.vercel.app` |
+| `feature-hero` | Preview | `jouw-app-git-feature-hero-jij.vercel.app` |
+| `feature-gallery` | Preview | `jouw-app-git-feature-gallery-jij.vercel.app` |
+| Pull request | Preview met PR-comment | Unieke URL per PR |
+
+Iedere nieuwe push naar dezelfde branch overschrijft de bestaande preview deploy.
+
+### Setup (eenmalig)
+
+```bash
+# 1. Vercel CLI installeren
+npm i -g vercel
+
+# 2. Inloggen
+vercel login
+
+# 3. Koppel project (in repo root)
+vercel link
+
+# 4. Eerste productie deploy
+vercel --prod
+```
+
+Of via dashboard: vercel.com → New Project → Import van GitHub.
+
+Vercel installeert een eigen GitHub App. Vanaf nu detecteert het automatisch elke push.
+
+### Combinatie met worktrees
+
+Je worktree-workflow + Vercel preview deployments past perfect samen:
+
+```
+1 worktree   =   1 branch   =   1 preview URL
+```
+
+Drie features parallel ontwikkelen?
+- `feature-hero` worktree → eigen preview URL
+- `feature-gallery` worktree → eigen preview URL
+- `feature-footer` worktree → eigen preview URL
+
+Drie verschillende stakeholders kunnen tegelijk reviewen.
+
+### Pull request flow
+
+```
+1. Push feature-branch
+2. Vercel deploy (preview URL)
+3. Open PR op GitHub
+4. Vercel bot plakt preview URL in PR comment
+5. Reviewer klikt URL, ziet live versie, geeft feedback
+6. Merge naar main → automatische productie deploy
+```
+
+Voor je eindopdracht: gebruik deze flow. Het scheelt enorm in feedback-rondes.
+
+### Environment variables
+
+Heeft je app secrets nodig (API keys etc.)?
+- Vercel dashboard → Project → Settings → Environment Variables
+- Voor scroll-animatie sites meestal niet nodig
+- Maar handig om te weten voor latere lessen
+
+### Wat NIET commiten
+
+```gitignore
+.env*.local
+.vercel
+```
+
+`.vercel` folder bevat link-info — staat al standaard in `.gitignore` van Next.js starter.
+
+---
+
+## 9. Project setup van A tot Z
 
 ### Stap 1 — Next.js 16 project aanmaken
 
@@ -545,7 +627,7 @@ Plugin maakt worktree → open nieuwe Sessions tab op die folder → agent bouwt
 
 ---
 
-## 9. Workflow patterns
+## 10. Workflow patterns
 
 ### Pattern 1 — Plan eerst, dan Build
 
@@ -573,7 +655,7 @@ Eén Session = orchestrator (in main). Worktrees met aparte Sessions = workers.
 
 ---
 
-## 10. Bronnen
+## 11. Bronnen
 
 ### OpenCode officieel
 - Hoofdsite: https://opencode.ai
@@ -611,6 +693,11 @@ Eén Session = orchestrator (in main). Worktrees met aparte Sessions = workers.
 - React README: https://github.com/darkroomengineering/lenis/blob/main/packages/react/README.md
 - Homepage: https://lenis.darkroom.engineering/
 
+### Vercel
+- Preview Deployments: https://vercel.com/docs/deployments/preview-deployments
+- Git Integration: https://vercel.com/docs/git
+- Vercel CLI docs: https://vercel.com/docs/cli
+
 ### Combinaties / patterns
 - GSAP forum: Next 15/16 best practices: https://gsap.com/community/forums/topic/43831-what-are-the-best-practices-for-using-gsap-with-next-15-clientserver-components/
 - Tutorial: Next.js + Lenis + GSAP: https://devdreaming.com/blogs/nextjs-smooth-scrolling-with-lenis-gsap