Website beheren met Claude Code: zo bouw en onderhoud je je eigen bedrijfssite

Kies je opzet

Claude Code website: welke opzet past bij jouw bedrijf?

Claude Code schrijft code in een map op je computer of in een repository. Het levert geen hosting en geen beheerscherm. Daarom kies je eerst waar je site op draait. Die keuze bepaalt hoe makkelijk het beheer over een jaar nog is.

De beslisregel

Kies Next.js als je meer dan zes pagina's hebt of verwacht, regelmatig blogs plaatst of eigen formulieren en structured data wilt. Waarom: pagina's delen componenten, dus een nieuwe dienstpagina is één bestand met tekst in plaats van een kopie van alle opmaak. Next.js levert bij nieuwe projecten een AGENTS.md mee die coding agents naar de documentatie van precies jouw versie stuurt, dus Claude werkt minder vanuit verouderde kennis.
Kies gewone HTML als je site klein blijft en niemand een blog gaat schrijven. Er is dan geen build-stap die kan breken. Die route staat uitgewerkt in de tutorial Claude website bouwen.
Blijf op WordPress of Shopify als collega's zonder Claude dagelijks teksten of producten aanpassen. Verhuizen kost meer dan het oplevert zolang dat beheerscherm het werk doet.

Waarom Next.js en niet een Claude-artifact of Lovable

Een artifact is één pagina op een claude.ai-adres, geen bedrijfssite op je eigen domein. Websitebouwers met AI zoals Lovable zetten snel iets neer, maar je code en hosting zitten dan vaak bij één partij. Met Next.js in je eigen GitHub-repository bezit je de code, kun je van host wisselen en kan elke ontwikkelaar of agent later verder. Dat eigendom is het hele punt van zelf beheren.

Kosten

Wat kost een website beheren met Claude Code?

De vaste kosten zijn je Claude-plan, je hosting en je domeinnaam. De rest is gratis of betaal je per transactie. Let vooral op de hostingregel: het gratis plan van Vercel mag je niet voor je bedrijf gebruiken.

Rekenvoorbeeld voor een kleine bedrijfssite

Claude Pro maandelijks (€18) plus Netlify Free komt neer op €18 per maand plus je domein, excl. btw. Kies je Vercel Pro, dan komt daar $20 per maand per ontwikkelaarsplek bij. Werk je alleen, dan is dat één plek. De hoogste post is niet de software maar je eigen tijd om wijzigingen te controleren. Plan die tijd in, want overslaan is precies waar het misgaat.

Waarom je limiet sneller op is dan je denkt

Claude Code deelt zijn gebruikslimiet met je chats en andere Claude-gebruik op hetzelfde account. Een build met screenshots en browsercontroles leest veel bestanden en kost meer dan een chatvraag. Raak je de limiet, dan lees je op Claude Code limiet bereikt wat je opties zijn. De volledige prijsvergelijking per plan staat op wat kost Claude Code.

Stap voor stap

Van lege map tot live: je Next.js-site bouwen met Claude Code

Dit is de route die we zelf gebruiken voor sites die moeten groeien. Je werkt in de terminal of in de Code-tab van de Claude desktop-app. Elke stap zegt waarom, zodat je weet wat je mist als je hem overslaat.

De commando's op een rij

Kopieer dit blok als je in de terminal werkt. Elke regel is een stap uit de lijst hierboven.

npx create-next-app@latest mijnbedrijf --yes
cd mijnbedrijf
claude
/init
gh repo create mijnbedrijf --private --source=. --push

Komt je ontwerp uit Claude Design?

Kies in je ontwerp Export > Handoff to Claude Code en begin daarna bij stap 3. Vraag Claude dan expliciet om het ontwerp in Next.js-componenten om te zetten. Zonder die zin krijg je soms losse HTML-bestanden naast je Next.js-project. Meer bij Claude Design.

CLAUDE.md

De CLAUDE.md voor je website: het geheugen van je site

Elke Claude Code-sessie begint leeg. De CLAUDE.md in je projectmap is wat Claude bij elke start opnieuw leest. Voor een website zet je daar de feiten in die Claude nooit mag verzinnen en de regels die elke wijziging moet volgen. Anthropic adviseert onder de 200 regels te blijven, omdat langere bestanden slechter worden opgevolgd.

Een CLAUDE.md voor een MKB-website om aan te passen

Vervang de blokhaken door je eigen gegevens. Zet het bestand in de hoofdmap van je project.

@AGENTS.md

# Website [Bedrijfsnaam]

## Bedrijfsfeiten (nooit verzinnen of aanpassen zonder opdracht)
- Handelsnaam: [naam]
- KVK-nummer: [nummer]
- Bezoekadres: [adres]
- Telefoon en e-mail: [gegevens]
- Wat we doen en voor wie: [twee zinnen]

## Schrijfregels
- Nederlands, je-vorm, korte zinnen.
- Verzin geen klantnamen, reviews, cijfers of keurmerken. Ontbreekt iets: zet [AANVULLEN] neer.
- Elke pagina heeft een eigen title, meta description en precies één h1.

## Techniek
- Next.js App Router. Pagina's in app/, blogposts als MDX in content/blog/.
- Afbeeldingen als WebP in public/images/, altijd met next/image en een alt-tekst die beschrijft wat je ziet.
- Geen externe scripts of trackers zonder mijn akkoord (cookieregels).
- Controleer na elke wijziging: npm run lint en npm run build moeten slagen.

## Werkwijze
- Werk op een aparte branch, nooit direct op main.
- Laat me de preview zien voordat je iets naar main zet.
- Lees nooit .env-bestanden en zet geen geheimen in de code.

Welke regels het meeste doen

"Verzin niets, zet [AANVULLEN] neer" voorkomt dat er een overtuigende maar onware zin op je site komt; een taalmodel vult gaten anders op met tekst die klinkt als jouw bedrijf. "Nooit direct op main" zorgt dat elke wijziging eerst als preview bestaat. En "npm run build moet slagen" vangt de fout die je in de browser niet ziet: een pagina die lokaal werkt maar bij het publiceren breekt.

Regels die echt moeten, zet je in settings

CLAUDE.md is context, geen slot op de deur. Volgens de documentatie gebruik je voor harde blokkades permissieregels of hooks. Zet in .claude/settings.json een weigerregel voor je geheimen, zodat Claude ze niet kan lezen, ook niet per ongeluk:

{
  "permissions": {
    "deny": ["Read(./.env)", "Read(./.env.*)"]
  }
}

Hoe je met hooks een controle afdwingt voor elke commit, lees je in de tutorial hooks. Meer over het bestand zelf staat in de tutorial CLAUDE.md schrijven en in het woordenboek bij CLAUDE.md en AGENTS.md.

Beheren

Website beheren met Claude Code: de klussen die elke maand terugkomen

Na de lancering begint het eigenlijke werk. Elke klus volgt hetzelfde ritme: nieuwe branch, opdracht in gewone taal, controle in de preview, akkoord, live. Hieronder per klus wat je typt en waar je op let.

Het vaste ritme: branch, preview, akkoord

Begin elke klus met: Maak een nieuwe branch voor deze wijziging. Na het werk zeg je: Push de branch. Vercel en Netlify maken dan een preview-URL die je op je telefoon kunt openen. Klopt alles, dan laat je Claude de branch samenvoegen met main en gaat de wijziging live. Waarom die omweg: de live site blijft heel tot jij hebt gekeken, en je kunt een collega de preview laten zien voordat het publiek hem ziet.

Laat Claude zelf in de browser kijken

In de Code-tab van de desktop-app start Claude je dev-server en controleert hij na elke wijziging zelf met screenshots, klikken en formulieren invullen. Werk je in de terminal, start dan met claude --chrome: Claude opent je site in Chrome, Edge of een andere Chromium-browser en leest de console mee. Een opdracht die goed werkt: Open localhost:3000/contact, verstuur het formulier met een ongeldig e-mailadres en controleer of de foutmelding verschijnt. Een alternatief zonder extensie is Playwright MCP.

Iets kapot op de live site? Eerst terug, dan zoeken

In Vercel klik je bij je productie-deployment op Instant Rollback en kies je de vorige versie. Op het gratis Hobby-plan kan dat alleen naar de direct vorige deployment, op Pro naar elke eerdere productieversie. Let op: na een rollback zet Vercel automatisch publiceren uit. Nieuwe pushes gaan pas weer live als je op Undo Rollback klikt. Wie dat niet weet, denkt dat de fix niet werkt. Zonder Vercel vraag je Claude: Draai de laatste commit terug met git revert en push.

Collega's laten meewerken zonder terminal

Typ in je project /install-github-app. Claude Code installeert de Claude GitHub-app, zet een geheime sleutel in je repository en maakt een workflow klaar. Daarna kan een collega met schrijfrechten in een GitHub-issue typen: @claude zet de nieuwe openingstijden op de contactpagina. Claude maakt een pull request en jij keurt hem goed. Je hebt beheerdersrechten op de repository nodig. Elke run telt mee in je GitHub Actions-minuten en in je Claude-verbruik. Meer in de tutorial Claude Code met GitHub.

SEO

SEO en vindbaarheid in AI-zoekmachines beheren met Claude Code

Next.js heeft de SEO-bouwstenen ingebouwd: per pagina een metadata-object, een sitemap en robots-bestand als code, en ruimte voor structured data. Claude Code kan ze allemaal schrijven. Wat het niet kan: weten waar jouw klanten op zoeken. Dat breng jij in.

Een maandelijkse SEO-controle om te plakken

Controleer de hele site op SEO. Geef per probleem het bestand en een voorstel, wijzig nog niets.
1. Pagina's zonder eigen title of description, of met een dubbele.
2. Pagina's met nul of meer dan één h1.
3. Afbeeldingen zonder alt-tekst.
4. Pagina's die niet in app/sitemap.ts staan.
5. Interne links naar adressen die niet bestaan.
6. Gewijzigde slugs zonder redirect.
Sorteer op impact en begin met wat een bezoeker uit Google het eerst raakt.

Waarom "wijzig nog niets" in die opdracht staat

Een SEO-controle levert vaak tientallen punten op. Laat je Claude alles tegelijk oplossen, dan krijg je één grote wijziging die je niet meer kunt nalezen. Met eerst een lijst kies jij wat zin heeft, en voer je de verbeteringen per onderwerp door. Een gewijzigde slug zonder redirect kost je ook de positie die die pagina in Google had; die controle is daarom de belangrijkste van de zes.

Gevonden worden in ChatGPT, Claude en Perplexity

AI-zoekmachines citeren pagina's die een vraag direct en volledig beantwoorden. Laat Claude per pagina de eerste alinea toetsen: staat het antwoord op de hoofdvraag in de eerste twee zinnen? Meer over die aanpak staat bij AI SEO en GEO. Hoe je Claude met Search Console-data laat werken, lees je in de tutorial Claude SEO.

Nederlandse eisen

Nederlandse eisen voor je site: cookies, AVG, KVK, iDEAL en toegankelijkheid

Claude Code bouwt wat je vraagt, ook als dat tegen de regels ingaat. Een voorbeeld van internet zet zo een tracking-script op je site zonder toestemming. Deze eisen zet je daarom in je CLAUDE.md en controleer je voor elke livegang.

Bezoekers meten zonder cookiebanner

Volgens Ondernemersplein heb je geen toestemming nodig voor cookies die niet privacygevoelig zijn, zoals functionele cookies en analytische cookies met weinig gevolgen voor de privacy. Je moet bezoekers wel informeren, bijvoorbeeld in je privacyverklaring. Vercel Web Analytics gebruikt volgens Vercel geen cookies van derden: een bezoeker wordt herkend aan een hash van het verzoek, die na 24 uur vervalt. Of dat voor jouw situatie genoeg is, beoordeel je zelf of met een adviseur. De Autoriteit Persoonsgegevens controleert cookiebanners. Wil je Google Analytics of advertentiepixels, dan heb je wel een toestemmingsbanner nodig.

iDEAL toevoegen: Mollie of Stripe

Verkoop je een paar producten of diensten, dan laat je Claude een betaling via Mollie of Stripe koppelen. Mollie rekent €0,32 per iDEAL-transactie en toont iDEAL en Wero samen; Stripe rekent €0,29 per iDEAL-betaling. Zet de API-sleutels in de omgevingsvariabelen van je host, nooit in de code, en test eerst met de testsleutels. Een volwaardige webshop met voorraad en retouren hoort op een webshopplatform; zie webshop maken met AI.

Wat Claude Code zelf met je code doet

Claude Code draait lokaal, maar het model niet: wat Claude leest, gaat naar Anthropic. Je websitecode is zelden gevoelig, je formulierinzendingen en klantbestanden wel. Houd die buiten je projectmap. Of Anthropic op je gesprekken traint, hangt af van je plan en een instelling in je account. Dat staat uitgewerkt op Claude Code privacy.

WordPress en Shopify

Claude Code met een bestaande WordPress- of Shopify-site

Je hoeft niet te verhuizen om Claude Code te gebruiken. Het verschil met een Next.js-site: je werkt niet in je eigen bestanden, maar via een koppeling of een kopie van je thema. Dat bepaalt wat wel en niet kan.

Shopify: de officiële toolkit installeren

Shopify raadt de plugin aan. Typ in je terminal:

claude plugin install shopify-ai-toolkit@claude-plugins-official

Wil je alleen de Dev MCP-server, dan gebruik je:

claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest

De Dev MCP-server draait lokaal en vraagt geen inlog. Hij geeft Claude de actuele documentatie en controleert GraphQL, Liquid en extensies tegen de schema's van Shopify. Je hebt Node.js 18 of nieuwer nodig.

WordPress: begin altijd met alleen-lezen

Vraag eerst: Geef een lijst van mijn pagina's met per pagina wat er mist voor een bezoeker die een offerte wil aanvragen. Je ziet dan wat Claude ziet, zonder dat er iets verandert. Pas als die lijst klopt, geef je schrijfrechten en laat je concepten maken. Hoe de WordPress.com-connector werkt, staat stap voor stap in de tutorial Claude website bouwen. Een directe koppeling met je eigen server valt onder MCP; lees bij prompt injection waarom je een agent met schrijfrechten niet los laat op pagina's met tekst van anderen, zoals reacties.

De valkuil

De grootste valkuil: wijzigingen direct live zetten zonder vangnet

De fout die we bij zelf beheerde sites het vaakst zien: Claude krijgt de opdracht om iets aan te passen en duwt het meteen naar de live site. Meestal gaat het goed. Tot er op een dag een kapotte contactpagina of een verzonnen zin live staat, en niemand het merkt tot een klant belt.

Waarom het misgaat

Claude Code is goed in doen wat je vraagt, en een kleine tekstwijziging voelt te klein voor een controle. Maar één wijziging raakt vaak meer dan je denkt: een gedeeld component, de sitemap, een formulier. Zonder branch en preview zie je dat pas als het live staat. Een tweede variant: een .env-bestand met API-sleutels dat per ongeluk in de repository belandt, omdat niemand het in .gitignore heeft gezet.

Zo bouw je het vangnet in vier stappen

1. Regel het in CLAUDE.md: werk op een aparte branch, nooit direct op main, en laat de preview zien voor het samenvoegen.
2. Blokkeer het in GitHub: zet bij je repository onder Settings > Branches een beschermingsregel op main die een pull request vereist. Dan kan niemand, ook Claude niet, direct op main pushen.
3. Weiger geheimen in settings: de deny-regels voor .env uit de CLAUDE.md-sectie, en controleer dat .env in .gitignore staat.
4. Laat een tweede blik meekijken: een pull request laten nakijken door Claude met code review vangt fouten die de schrijvende sessie mist.

Ons oordeel

Ons oordeel: wanneer je je website zelf met Claude Code beheert, en wanneer niet

Deze site, projectimpact.nl, draait zelf op Next.js bij Vercel, met serverfuncties in Frankfurt, en we beheren hem dagelijks met Claude Code en een CLAUDE.md. Voor ons werkt het. Voor jou hangt het af van één vraag: is er iemand in je bedrijf die elke wijziging wil nakijken?

Wel doen als

Je site groeit met pagina's en blogs, en je wilt niet voor elke tekstwijziging een webbureau mailen. Eén vaste persoon in je bedrijf neemt het beheer op zich en kijkt elke preview na. Je wilt je code en hosting zelf in handen, zodat je later kunt wisselen van host of bouwer. En je vindt het prettig om in gewone taal te sturen en per wijziging te controleren.

Niet doen als

Meerdere collega's moeten dagelijks zelf teksten aanpassen zonder Claude: dan is een systeem met beheerscherm zoals WordPress beter. Je verkoopt veel producten met voorraad en retouren: neem een webshopplatform. Je site heeft klantaccounts of verwerkt gevoelige gegevens: laat dat bouwen en beveiligen door een ontwikkelaar. Of niemand wil eigenaar zijn van privacy, updates en controle: dan staat er over een half jaar een site die niemand meer durft aan te raken.

De fout die we in trainingen het vaakst zien

Eén eindeloze sessie waarin alles door elkaar gaat: de kleur van de knoppen, een nieuwe blog, de footer en een formulier. De context loopt vol, Claude vergeet afspraken van een uur eerder en de wijziging is niet meer na te lezen. Werk liever per klus: één branch, één onderwerp, nieuwe sessie met /clear als het onderwerp verandert. CLAUDE.md zorgt dat je daarbij niets kwijtraakt.

Een herkenbaar MKB-voorbeeld

Een voorbeeld, geen klantcase: een accountantskantoor met twaalf medewerkers heeft een verouderde site en wil elke maand een blog over fiscale wijzigingen. De officemanager neemt het beheer op zich. Ze maakt het project aan met create-next-app, zet de kantoorgegevens en schrijfregels in CLAUDE.md en zet de site op Netlify Free. Elke maand plakt ze het concept van een fiscalist, Claude maakt er een blogpost van op een aparte branch, en de fiscalist leest de preview na voordat hij live gaat. In de eerste versie staat een bedrag dat niet in het concept stond; dankzij de regel "verzin niets" valt het op in de preview en wordt het [AANVULLEN]. Het contactformulier stuurt aanvragen naar de Microsoft 365-mailbox van het kantoor, en de privacyverklaring is door hun adviseur nagekeken.

Wil je dit met je team leren?

In de Claude Code Masterclass leert je team werken met CLAUDE.md, Plan mode, branches en previews op een eigen project, zodat het beheer niet bij één persoon blijft hangen. Gebruik je Codex in plaats van Claude, lees dan website beheren met Codex; de verschillen tussen beide tools staan op Claude Code vs Codex.