From Next.js to Astro + Cloudflare: A 2-Hour AI-Powered Migration

Two hours. That’s how long it took to migrate this entire portfolio from Next.js on Vercel to Astro on Cloudflare—and I didn’t write a single line of code manually - on purpose.

I used Claude Code to handle the entire migration: converting React components to Astro, updating routing, adapting the build pipeline, and deploying to Cloudflare. The AI handled the tedious transformation work while I focused on reviewing and directing the changes.

But this post isn’t just about that migration. It’s about a bigger shift in how I think about building for the web: Astro for websites, TanStack Start for web apps, everything on Cloudflare.

The Two-Hour Migration with Claude Code

Let me be specific about what “two hours without touching code” means:

What Claude Code handled:

Converting 10+ Next.js pages and components to Astro
Transforming getStaticProps/getServerSideProps to Astro’s content collections
Updating all imports and routing patterns
Adapting Tailwind and CSS modules to Astro’s scoped styles
Configuring the Cloudflare adapter and wrangler.toml
Fixing TypeScript errors and build issues
Writing the deployment workflow

This isn’t about AI replacing developers—it’s about AI handling the mechanical transformation work that would otherwise take days. The patterns for migrating Next.js to Astro are well-documented; Claude Code just executed them faster and more consistently than I could have.

Why I Stopped Using Next.js for Everything

For years, Next.js was my default for every project. Blog? Next.js. Dashboard app? Next.js. Landing page? Next.js. It worked, but I was using a sledgehammer for every nail.

The realization: Content-heavy websites and interactive web applications have fundamentally different requirements. Treating them the same leads to over-engineering or under-serving one category.

The Vercel Lock-in Problem

Let’s be honest about what Vercel has become: a great platform that’s increasingly designed to keep you dependent on their infrastructure.

The warning signs I noticed:

Pricing pressure: Costs escalate quickly once you move beyond hobby tier
Next.js optimization for Vercel: Features like ISR, middleware, and image optimization work best (or only) on Vercel
Migration friction: Try deploying a Next.js app elsewhere—you’ll spend days working around Vercel-specific assumptions
Proprietary lock-in: next/image, @vercel/og, Edge Functions—all create dependencies that don’t transfer
Weird issues - due to back magic done behind the scenes of Next.js
Poor performance on development server - event Turborepo is not helping

When I tried to self-host a Next.js 16 app, I realized how deep the coupling had become. The framework and the platform are increasingly inseparable by design.

Why Cloudflare Won Me Over

After evaluating alternatives, Cloudflare’s developer platform stood out for several compelling reasons:

1. Predictable, Generous Pricing

Cloudflare Workers includes 100,000 requests/day free on the free tier. Even the paid tier ($5/month) includes 10 million requests. Compare this to Vercel’s compute costs that can surprise you at scale.

2. True Edge Computing

Cloudflare runs your code in 300+ data centers worldwide. This isn’t just marketing—the cold start times are consistently under 5ms. My API responses are genuinely faster because they execute closer to users.

3. The Full Platform Story

What sets Cloudflare apart is the integrated platform:

D1: SQLite at the edge with automatic replication
KV: Key-value storage with global distribution
R2: S3-compatible object storage with zero egress fees. R2 has zero egress fees. This alone can save thousands per month compared to AWS S3 or Vercel’s bandwidth costs.
Queues: Durable message queues
Durable Objects: Stateful serverless with strong consistency
Analytics Engine: Built-in analytics without third-party tools

This is a complete backend platform, not just a deployment target.

TanStack Start: My New Production Stack

Here’s what really excites me: I’m now using TanStack Start with Cloudflare Workers for my production applications. This combination is transformative.

Why TanStack Start?

TanStack Start is a full-stack React framework that takes a different approach:

Framework-agnostic routing: TanStack Router is genuinely portable
Server functions: Type-safe RPC without the complexity
Deployment flexibility: Works on any runtime, no lock-in
Modern React: Built for React 19 and Server Components

// server function example - type-safe, works everywhere
import { createServerFn } from '@tanstack/react-start/server'

export const getUsers = createServerFn({ method: 'GET' })
  .handler(async () => {
    const users = await db.query.users.findMany()
    return users
  })

TanStack + Cloudflare = Perfect Match

The combination works beautifully:

TanStack Start deploys to Cloudflare Workers out of the box
Full access to D1, KV, R2 from your server functions
Type-safe from database to UI
Zero platform lock-in—I can redeploy elsewhere if needed

// Using Cloudflare D1 with TanStack Start
import { createServerFn } from '@tanstack/react-start/server'
import { getCloudflareContext } from '@tanstack/react-start/cloudflare'

export const getProjects = createServerFn({ method: 'GET' })
  .handler(async () => {
    const { env } = getCloudflareContext()
    const { results } = await env.DB.prepare(
      'SELECT * FROM projects WHERE active = 1'
    ).all()
    return results
  })

The New Stack Philosophy: Right Tool, Right Job

After this migration, I’ve adopted a clear separation:

Astro for Websites (Content-First)

Websites are primarily about delivering content: blogs, portfolios, documentation, marketing pages. They need to be fast, SEO-friendly, and light on JavaScript.

Astro excels here because:

Zero JS by default: Ship HTML and CSS, add interactivity only where needed
Content collections: Type-safe markdown with schema validation
Island architecture: Hydrate only the components that need it
Static-first: Pre-render what you can, SSR what you must

This portfolio is a perfect example. Most pages are static content. The few interactive elements (theme toggle, mobile menu) are isolated islands. The result: blazing fast load times with minimal client-side JavaScript.

TanStack Start for Web Apps (Interaction-First)

Web applications are different. Dashboards, admin panels, SaaS products—these need rich interactivity, complex state management, and real-time updates. They’re applications that happen to run in a browser.

TanStack Start wins here because:

Full React power: No limitations on what you can build
Type-safe from DB to UI: Server functions with end-to-end types
Modern React: Built for React 19, Suspense, and Server Components
No lock-in: Deploys anywhere, not tied to a specific platform

The Unified Cloudflare Platform

Here’s the beautiful part: despite using different frameworks for different purposes, everything deploys to the same platform.

Use Case	Framework	Cloudflare Product
Content sites	Astro	Cloudflare Pages
Web applications	TanStack Start	Cloudflare Workers
APIs	Hono	Cloudflare Workers
Database	-	D1 (SQLite at edge)
Storage	-	R2 (zero egress fees)

All three share the same deployment workflow (wrangler deploy), the same global edge network, and the same predictable pricing.

Escaping Lock-in Matters

I’m not saying Vercel is bad—it’s genuinely excellent for getting started quickly. But as your needs grow, the lock-in becomes expensive and limiting.

What I gained by moving to Cloudflare:

significant cost reduction on hosting
Faster cold starts and global performance
Full backend services without AWS complexity
Framework portability (I’m not tied to one JS framework)
Confidence that I can leave if something better emerges

The web development ecosystem is healthier when platforms compete on merit rather than lock-in. Cloudflare is competing on merit, and it’s winning.

The AI-Assisted Development Reality

Let me circle back to the Claude Code migration. This experience changed how I think about framework migrations and large-scale refactoring.

The old way: Spend a week manually converting files, chasing down edge cases, fixing import paths, and debugging build errors. Avoid migrations because the effort rarely seems worth it.

The new way: Describe what you want, let AI handle the mechanical transformation, review and iterate. A migration that would have taken a week becomes an afternoon.

This doesn’t mean AI writes better code than humans. It means AI excels at:

Pattern-based transformations (Next.js → Astro has well-known patterns)
Tedious but straightforward conversions
Maintaining consistency across many files
Catching common migration pitfalls

The 2-hour migration worked because:

The transformation patterns are well-documented
I knew exactly what I wanted (Astro on Cloudflare)
Claude Code could read my existing codebase and understand the structure
I stayed involved to guide decisions and catch issues

Would I recommend this approach? Absolutely—for the right situations. Framework migrations, large refactors, updating to new API patterns. These are exactly the tasks where AI assistance shines.

My Current Stack:

Astro - Content sites and blogs
TanStack Start - Web applications
Hono - APIs
Cloudflare Workers - Edge compute