AI-assisted web development with Claude Code and Next.js – how we build websites with a headless CMS

The way websites are built has changed more in the last two years than in the decade before. Not because design trends have shifted, but because AI now takes an active part in writing the code. With AI-assisted web development, an experienced developer using Claude Code as a coding agent builds websites considerably faster than before.

This article covers the practical stack behind modern AI-built websites – Claude Code as an intelligent coding assistant, Next.js 16 as the frontend framework and Sanity as the headless CMS – and why the three work particularly well together. It is the same stack we use in our work as a headless CMS agency.

We also look at the limits of fast AI generation tools when you need a serious, professional website rather than a portfolio or a quickly made digital business card.

What is Claude Code?

Claude Code is Anthropic's AI coding tool that runs directly in the terminal, VS Code and JetBrains. Unlike an ordinary coding assistant that suggests lines of code, Claude Code is agentic – it reads your codebase, creates and edits files, runs commands and commits to Git without you having to spell out every step.

In practice you work with Claude Code the way you would with an experienced colleague: you describe what you want to achieve, discuss architectural decisions and let the tool carry them out. It is no substitute for expertise – it multiplies the capacity of someone who understands what needs to be built, how to run a good website project and how to manage an AI agent.

A key detail: Claude Code reads a CLAUDE.md file in the project root at the start of every session. It acts as a standing brief for the AI – which coding conventions apply, which libraries the project uses and how the architecture is meant to work. So knowledge about the project is not lost between sessions.

Why a headless CMS fits AI-built websites so well

When you build with Claude Code, you want the architecture to be clear and well defined. A headless CMS solves a problem that otherwise creates friction: how do you separate content from the presentation layer in a way an AI can easily understand and work with?

A headless CMS such as Sanity stores content as structured data and exposes it via an API. Claude Code can use that API to fetch content, generate typed components and build pages without mixing content logic with presentation logic. That makes the code more predictable – and predictable code is code an AI can work with efficiently.

A headless CMS is also API-first by nature, so the content can be reused by other systems – including AI agents and RAG systems that need structured content. The headless architecture you build today becomes an asset for the next generation of AI integrations – something we work on continuously through our sister brand AI Partner.

Sanity – a CMS built for the AI era

Sanity positions itself as the "Content Operating System for the AI era". That is not empty marketing talk – it reflects real technical decisions that make Sanity unusually well suited to AI-assisted development:

• Schema-as-code – Sanity's schema is defined in TypeScript/JavaScript directly in the codebase, so Claude Code can read, generate and change it without you having to click around in a UI.
• MCP integration – Sanity has an official MCP server (now available as a remote server via mcp.sanity.io) that lets Claude Code and Claude Desktop talk directly to the Sanity project. You can ask your AI to create or update content in the CMS without leaving the terminal.
• GROQ – Sanity's own query language is designed to be intuitive. Claude Code understands GROQ and writes efficient queries without you having to spell out every detail.
• Real-time API and global CDN – Sanity delivers content with low latency worldwide, which gives you a strong foundation for Core Web Vitals.

Get started with a new Sanity project from the terminal: npm create sanity@latest

Next.js 16 – the framework that ties the stack together

Next.js 16 is React-based and has become the dominant choice for production web applications. It supports React 19.2 and ships Turbopack as a stable bundler for the development server – with up to 76% faster startup in Vercel's own measurements (the Next.js blog). It also combines Server Components with streaming and static generation, which gives you an excellent foundation for SEO and Core Web Vitals.

It is also the framework Claude Code works best with. There is a wealth of reference code, well-established conventions and an ecosystem the AI understands deeply. So Claude rarely has to guess – it knows how Next.js is meant to be used.

Integration with Sanity runs through the official next-sanity package, which provides built-in image optimisation, live preview and type generation straight from the Sanity schema.

The practical workflow

This is what a typical project looks like when you combine Claude Code, Next.js and Sanity:

1. Initialise the project – Create the Next.js project and the Sanity project. Add a CLAUDE.md with architectural decisions and conventions from day one.
2. Define the content schema – Tell Claude Code which content types you need: blog posts, products, team members. Claude generates the Sanity schema and puts it in the right files.
3. Build components – Describe the layout. Claude Code creates React components with the correct props and TypeScript types, based on the Sanity schema.
4. Connect the data – Claude Code writes GROQ queries to fetch the right data from Sanity and wires them to the components using Next.js data-fetching patterns.
5. Iterate and publish – Every iteration happens in dialogue with Claude Code. Git commits, pull requests and deployment via Vercel can all be handled straight from the terminal.

What used to take a developer three weeks can now take three to five days. Not because less skill is needed, but because the AI handles the mechanical work while you focus on architecture, design and business logic. That in turn frees up time for what really decides whether a website succeeds: the strategy behind it, its positioning and what it should achieve for the business.

Advantages of this tech stack

• Faster delivery – Production speeds up markedly when AI handles boilerplate code, repetitive patterns and debugging.
• Better code quality – With clear conventions in CLAUDE.md and a well-known architecture, the code stays consistent over time.
• Scalability – The headless architecture makes it easy to add new channels, integrations or AI features later on.
• SEO performance – Next.js Server Components combined with Sanity's fast CDN give technical SEO an excellent foundation.
• Maintenance – Editors work in Sanity Studio – an intuitive CMS interface – without needing a developer for every content change.

Lovable, Bolt and similar tools – why are they not enough for production websites?

Tools such as Lovable and Bolt generate fully working applications in minutes. That is impressive – and partly misleading. Historically they produced an SPA (Single Page Application), where all rendering happens in the browser via JavaScript: to a user it looks flawless, but to Google's crawler the page is essentially empty on first load. The tools have started moving towards server rendering – since May 2026 Lovable has created new projects with SSR via TanStack Start – but SEO and structural control are still weaker and harder to manage than with Next.js Server Components, and older projects remain pure SPAs.

Next.js Server Components work the other way round: the full HTML is delivered from the server before any JavaScript has loaded, so the crawler sees the content straight away. That is the difference between an indexable page and an invisible one – and it shows in the rankings. Read more about how technical structure affects both Google and AI answers in our guide to how AI affects SEO.

Beyond the SEO problems, there are three structural limitations:

• No CMS – content is hard-coded or lives in the tool's own interface without a standard API
• Limited SEO control – metadata, schema markup and URL structure are hard to manage consistently
• Technical debt – unstructured AI-generated code is hard to maintain or build on without starting over

For more on how to choose a platform, see our article What to consider when building or buying a new website (2026).

When does this stack fit – and when does it not?

Claude Code + Next.js + Sanity is an excellent fit for:

• Marketing websites with dynamic content and demanding SEO requirements
• Websites that need to grow fast without turning into technical debt
• Projects where the same content needs to reach several channels – web, app, email
• Teams with developers who want to multiply their capacity with AI
• Websites and products that work as web applications rather than static marketing websites

It is less suited to:

• Projects that the marketing team will then run entirely on its own, without help from developers – Webflow, for example, is a better choice there (see Webflow vs WordPress)
• Simpler websites such as portfolios, quick digital business cards and the like – Framer, for example, is a better fit here
• A tight budget and a tight deadline with no experience of the stack

Need to compare website platforms for a larger organisational project? Read our article Website platform for large and growing companies: Webflow, headless CMS or an enterprise system?

Want to know how to strengthen your new website's AI visibility alongside the technology? Read AI Overviews and GEO: how your company shows up in Google's AI answers.

If you are still in the evaluation phase, our guide How to choose a web agency – 16 questions can point you in the right direction.

Want help deciding which technology suits your project? We offer free advice and can then take care of the whole web development process, from architecture to launch. Get in touch.