AI-nettside med Claude Code og Next.js: slik bygger vi nettsider med headless CMS

Måten nettsider bygges på har endret seg mer de siste to årene enn i det foregående tiåret. Ikke fordi designtrendene har skiftet – men fordi kunstig intelligens (KI) nå er en aktiv deltaker i selve kodingen. En erfaren utvikler med Claude Code som kodeagent bygger i dag en AI-nettside betydelig raskere enn før.

Denne artikkelen handler om den praktiske stacken bak moderne KI-bygde nettsider: Claude Code som intelligent kodeassistent, Next.js 16 som frontend-rammeverk og Sanity som headless CMS. Og hvorfor disse tre komponentene fungerer spesielt godt sammen – det er den samme stacken vi bruker i arbeidet vårt som headless CMS-byrå.

Artikkelen går også inn på begrensningene ved å bruke raske KI-genereringsverktøy til profesjonelle, seriøse nettsider som skal være mer enn en portefølje eller et raskt laget digitalt visittkort.

Hva er Claude Code?

Claude Code er Anthropics KI-verktøy for koding som kjører direkte i terminalen, VS Code og JetBrains. I motsetning til en vanlig kodeassistent som foreslår kodelinjer, er Claude Code agentisk – det leser kodebasen din, oppretter og redigerer filer, kjører kommandoer og committer til Git uten at du trenger å instruere hvert enkelt steg.

I praksis jobber man med Claude Code som med en erfaren kollega: du beskriver hva du vil oppnå, diskuterer arkitekturbeslutninger og lar verktøyet utføre. Det er ikke en erstatning for kompetanse – det er en mangedobling av kapasiteten for den som forstår hva som skal bygges, hvordan man prosjektleder en god nettside og hvordan man prosjektleder en AI-agent.

En sentral detalj: Claude Code leser en CLAUDE.md-fil i prosjektets rot ved hver økt. Den fungerer som en varig instruks til KI-en – hvilke kodekonvensjoner som gjelder, hvilke biblioteker prosjektet bruker, hvordan arkitekturen er tenkt. Det betyr at kunnskapen om prosjektet ikke går tapt mellom øktene.

Hvorfor headless CMS passer så godt til KI-bygde nettsider

Når du bygger med Claude Code, vil du at arkitekturen skal være tydelig og veldefinert. Et headless CMS løser et problem som ellers skaper friksjon: hvordan skiller du innholdet fra presentasjonslaget på en måte som er enkel for KI å forstå og jobbe med?

Et headless CMS som Sanity lagrer innhold som strukturerte data og eksponerer det via API. Claude Code kan bruke det API-et til å hente innhold, generere typede komponenter og bygge sider uten å blande innholdslogikk med presentasjonslogikk. Det gjør koden mer forutsigbar – og forutsigbar kode er kode en KI kan jobbe effektivt med.

Dessuten: et headless CMS er naturlig API-first. Det betyr at innholdet kan gjenbrukes av andre systemer – inkludert AI-agenter og RAG-systemer som trenger tilgang til strukturert innhold. Headless-arkitekturen du bygger i dag, blir en ressurs i neste generasjons KI-integrasjoner. Det er noe vi jobber med fortløpende via søsterselskapet vårt AI Partner.

Sanity: et CMS bygget for KI-æraen

Sanity posisjonerer seg selv som «Content Operating System for the AI era». Det er ikke tomt markedsføringssnakk – det gjenspeiler faktiske tekniske valg som gjør Sanity uvanlig godt egnet for KI-assistert utvikling:

• Schema-as-code – Sanitys skjema defineres i TypeScript/JavaScript direkte i kodebasen. Det betyr at Claude Code kan lese, generere og endre skjemaet uten at du trenger å klikke rundt i et brukergrensesnitt.
• MCP-integrasjon – Sanity har en offisiell MCP-server (nå som fjernserver via mcp.sanity.io) som lar Claude Code og Claude Desktop kommunisere direkte med Sanity-prosjektet. Du kan be KI-en opprette eller oppdatere innhold i CMS-et uten å forlate terminalen.
• GROQ – Sanitys proprietære spørrespråk er designet for å være intuitivt. Claude Code forstår GROQ og skriver effektive spørringer uten at du trenger å spesifisere hver detalj.
• Sanntids-API og globalt CDN – Sanity leverer innhold med lav forsinkelse globalt, noe som gir et sterkt grunnlag for Core Web Vitals.

Kom i gang med et nytt Sanity-prosjekt via terminalen: npm create sanity@latest

Next.js 16: rammeverket som binder stacken sammen

Next.js 16 er React-basert og har blitt det dominerende valget for produksjonsklare webapplikasjoner. Det støtter React 19.2, har Turbopack som stabil bundler for utviklingsserveren – i Vercels egne målinger opptil 76 % raskere oppstart (Next.js-bloggen) – og kombinerer Server Components med streaming og statisk generering, noe som gir utmerkede forutsetninger for SEO og Core Web Vitals.

Det er også rammeverket Claude Code jobber best med. Det finnes massevis av referansekode, velkjente konvensjoner og et økosystem som KI-en forstår i dybden. Det gjør at Claude sjelden trenger å gjette – den vet hvordan Next.js er ment å brukes.

Integrasjonen mot Sanity håndteres via den offisielle next-sanity-pakken, som gir innebygd støtte for bildeoptimalisering, live forhåndsvisning og typegenerering direkte fra Sanity-skjemaet.

Den praktiske arbeidsflyten

Slik ser et typisk prosjekt ut når du kombinerer Claude Code, Next.js og Sanity:

1. Initier prosjektet – Opprett Next.js-prosjektet og Sanity-prosjektet. Legg til en CLAUDE.md med arkitekturbeslutninger og konvensjoner fra dag én.
2. Definer innholdsskjemaet – Beskriv for Claude Code hvilke innholdstyper du trenger: blogginnlegg, produkter, teammedlemmer. Claude genererer Sanity-skjemaet og plasserer det i riktige filer.
3. Bygg komponenter – Beskriv layouten. Claude Code lager React-komponenter med korrekte props og TypeScript-typer basert på Sanity-skjemaet.
4. Koble data – Claude Code skriver GROQ-spørringer for å hente riktige data fra Sanity og kobler dem til komponentene med Next.js' mønstre for datahenting.
5. Iterer og publiser – Hver iterasjon skjer i dialog med Claude Code. Git-commits, pull requests og utrulling via Vercel kan håndteres direkte fra terminalen.

Det som tidligere tok en utvikler tre uker, kan i dag ta tre til fem dager. Ikke fordi kompetansekravene er senket – men fordi KI-en tar seg av det mekaniske arbeidet mens du fokuserer på arkitektur, design og forretningslogikk. Det frigjør i sin tur kapasitet til det som faktisk avgjør om nettsiden lykkes: strategien bak nettsiden, posisjoneringen og hva nettstedet skal oppnå for virksomheten.

Fordeler med denne teknologistacken

• Raskere leveranse – Produksjonstakten øker markant når KI tar seg av standardkode, repetitive mønstre og feilsøking.
• Bedre kodekvalitet – Med tydelige konvensjoner i CLAUDE.md og velkjent arkitektur holder koden seg konsekvent over tid.
• Skalerbarhet – Headless-arkitekturen gjør det enkelt å legge til nye kanaler, integrasjoner eller KI-funksjoner senere.
• SEO-ytelse – Next.js Server Components kombinert med Sanitys raske CDN gir utmerkede forutsetninger for teknisk SEO.
• Drift – Redaktører jobber i Sanity Studio – et intuitivt CMS-grensesnitt – uten å trenge en utvikler ved hver innholdsendring.

Lovable, Bolt og lignende verktøy: hvorfor holder det ikke for produksjonsnettsider?

Verktøy som Lovable og Bolt genererer fullt fungerende applikasjoner på minutter. Det er imponerende – og delvis misvisende. Historisk produserte de en SPA (Single Page Application) der all gjengivelse skjer i nettleseren via JavaScript: for en bruker ser det feilfritt ut, men for Googles crawler er siden i praksis tom ved første lasting. Verktøyene har begynt å bevege seg mot servergjengivelse – Lovable leverer nye prosjekter med SSR via TanStack Start siden mai 2026 – men kontrollen over SEO og struktur er fortsatt svakere og vanskeligere å styre enn med Next.js Server Components, og eldre prosjekter er fortsatt rene SPA-er.

Next.js Server Components fungerer motsatt: full HTML leveres fra serveren før JavaScript i det hele tatt er lastet. Crawleren ser innholdet med en gang. Det er forskjellen mellom en indekserbar side og en usynlig side – og det merkes i rangeringen. Mer om hvordan teknisk struktur påvirker både Google og KI-svar i guiden vår om hvordan KI påvirker SEO.

I tillegg til SEO-problematikken finnes det tre strukturelle begrensninger:

• Ikke noe CMS – innholdet er hardkodet eller lever i verktøyets eget grensesnitt uten standard-API
• Begrenset SEO-kontroll – metadata, schema markup og URL-struktur er vanskelige å håndtere konsekvent
• Teknisk gjeld – KI-generert kode uten struktur er vanskelig å drifte og bygge videre på uten å begynne på nytt

Mer om hvordan du tenker rundt plattformvalg finner du i artikkelen vår Lage nettside 2026: selv, med AI eller kjøpe fra byrå?.

Når passer denne stacken – og når passer den ikke?

Claude Code + Next.js + Sanity passer utmerket for:

• Markedsnettsider med dynamisk innhold og høye SEO-krav
• Nettsider som må vokse raskt uten å bli teknisk gjeld
• Prosjekter der det samme innholdet skal leveres til flere flater – nett, app, e-post
• Team med utviklere som vil mangedoble kapasiteten sin med KI
• Nettsider og produkter som lever som webapplikasjoner snarere enn statiske markedsnettsider

Det passer dårligere for:

• Prosjekter som etterpå skal drives helt av markedsavdelingen uten hjelp fra utviklere – der er for eksempel Webflow et bedre valg (se Webflow vs WordPress)
• Enklere nettsider som porteføljesider, raske digitale visittkort og lignende. Her egner for eksempel Framer seg bedre
• Stramt budsjett og stram tidsfrist uten erfaring med stacken

Trenger du å sammenligne nettsideplattformer for et større organisasjonsprosjekt? Les artikkelen vår Plattform for store og voksende bedrifter: Webflow, headless CMS eller enterprise-system?

Vil du forstå hvordan KI-synligheten til den nye nettsiden din kan styrkes parallelt med teknikken? Les AI Overviews SEO: slik blir bedriften sitert i Googles KI-svar.

Er du fortsatt i vurderingsfasen, kan guiden vår Slik velger du webbyrå – 16 spørsmål hjelpe deg videre.

Vil du ha hjelp til å avgjøre hvilken teknologi som passer prosjektet ditt? Vi gir gratis rådgivning og tar deretter hånd om hele webutviklingen fra arkitektur til lansering. Ta kontakt.