Hoe je checkt of jouw Vercel-deployment geen gevoelige data lekt

Vercel is de standaard keuze voor veel vibecode-apps. Begrijpelijk: het is snel, makkelijk te koppelen aan GitHub, en werkt goed samen met Next.js en andere populaire frameworks.

Maar Vercel heeft één valkuil die regelmatig misgaat: omgevingsvariabelen die bedoeld zijn voor de server, belanden in de browser.

Hoe omgevingsvariabelen werken in Vercel

Vercel kent twee soorten:

• Alleen voor de server: beschikbaar in serverfuncties, API-routes en servercomponenten. Nooit zichtbaar in de browser.
• Voor de browser: beginnen met NEXT_PUBLIC_ en zijn bewust beschikbaar in de browser.

Het probleem: als je een variabele instelt zonder NEXT_PUBLIC_ maar hem vervolgens aanroept in een browsercomponent, kan Next.js hem alsnog meesturen naar de browser. Of de variabele is gewoon leeg en je app werkt niet. In beide gevallen: niet wat je wil.

Wat kan er lekken?

De meest risicovolle situaties:

• Je OpenAI API-sleutel staat in een browsercomponent: iedereen kan hem uitlezen via de browser-ontwikkelaarstools
• Je Supabase admin-sleutel staat op de verkeerde plek: iemand kan daarmee de hele database benaderen
• Databaseverbindingen met wachtwoorden: direct toegang tot je data

Zo controleer je het zelf

Stap 1: Open je app in Chrome, ga naar Ontwikkelaarstools en klik op het tabblad “Network”

Laad de pagina opnieuw. Zoek in de antwoorden naar verzoeken met /_next/static. Kijk of je ergens een API-sleutel, wachtwoord of ander geheim ziet staan in een JavaScript-bestand.

Stap 2: Kijk in de paginabron

Rechtsklik en kies “Paginabron bekijken”. Zoek (Ctrl+F) op termen als KEY, SECRET, TOKEN, PASSWORD. Als ze hier staan, zijn ze openbaar.

Stap 3: Controleer je Vercel-instellingen

Ga naar jouw project op vercel.com, dan Settings en dan Environment Variables. Kijk welke variabelen er staan en of de namen kloppen. Staat er een geheime sleutel in met NEXT_PUBLIC_ ervoor? Dan is die openbaar voor de hele wereld.

Stap 4: Doorzoek je code

Zoek in je codebase naar process.env.NEXT_PUBLIC_. Elke variabele die daar staat, is zichtbaar in de browser. Controleer of dat echt de bedoeling is.

Snel te fixen

De meeste lekken zijn eenvoudig op te lossen: verplaats de logica naar een servercomponent of API-route en roep de variabele daar aan. De browser vraagt dan alleen het resultaat op, nooit de sleutel zelf.

Wil je zeker weten dat jouw Vercel-deployment niets lekt? We nemen dit standaard mee in de controle.