Migrate Your Framer Site to Next.js

Framer is built on React. It renders React components. The animation library that powers Framer’s visual editor is called motion (formerly Framer Motion), and it is one of the most popular React libraries in the ecosystem. Everything about Framer screams React.

But you cannot have the React code.

Framer generates a proprietary component tree that only runs inside Framer’s infrastructure. You cannot export it. You cannot inspect it. You cannot copy it into a Next.js project. From Framer’s help center:

“Framer does not offer HTML exporting functionality for self-hosting.”

If you want real React code — code you can read, modify, deploy anywhere, and hand to any developer — Next.js is the most natural destination. It gives you everything Framer uses (React, the motion animation library, component architecture) without the lock-in. You own the code, you choose the hosting, and the entire React ecosystem is available to you.

This guide covers when Next.js is the right migration target, when you should consider Astro instead, and how to actually execute the migration.

When Next.js is the right choice

Not every Framer migration should go to Next.js. The choice depends on what your site needs to do.

Choose Next.js when your site does more than display content. If your Framer site is a marketing homepage and a blog, Next.js is overkill — use Astro. But if your website needs any of the following, Next.js is the right framework:

User authentication and accounts. Login pages, dashboards, member-only content. Next.js has built-in support for authentication patterns with libraries like NextAuth.js, Clerk, and Auth0.
Server-side data fetching. Pulling from APIs, databases, or third-party services on each request. Next.js Server Components make this natural.
Complex React interactions. Multi-step forms, interactive tools, data visualizations, real-time updates. When most of your site is interactive React, Next.js is the natural home.
Full-stack features. API routes, server actions, database connections. Next.js is a full-stack framework, not just a static site generator.
Incremental adoption. If you have an existing React codebase and want to fold your marketing site into it, Next.js keeps everything in one framework.

Choose Astro when your site is primarily content. Marketing pages, blogs, portfolios, documentation — if visitors mostly read content and interact rarely, Astro ships zero JavaScript by default and typically scores 95-100 on Lighthouse. You can still use React components in Astro “islands” for interactive sections.

Here is a practical comparison:

	Next.js	Astro
Best for	Interactive apps, dashboards, full-stack	Marketing sites, blogs, portfolios
React usage	Full React everywhere	React only where needed (islands)
JavaScript shipped	React runtime on every page (~80KB+)	Zero by default
Server-side features	Server Components, API routes, middleware	Optional server endpoints
Animations	`motion`, `react-spring`, any React library	CSS + `motion` in islands + View Transitions
Free hosting	Vercel free tier (some limits)	Cloudflare/Vercel/Netlify (truly free)
Typical Lighthouse score	80-95	95-100
CMS options	Any headless CMS, markdown, database	Built-in content collections (markdown)

The honest truth is that most Framer sites are marketing pages. If yours is one of them, Astro is probably the better target. This guide focuses on the cases where Next.js genuinely makes sense, while being transparent about when Astro is the better choice.

The React ecosystem continuity argument

One of the strongest reasons to choose Next.js for a Framer migration is ecosystem continuity. Framer uses React under the hood. The motion animation library is a React library. If your team knows React, or if you plan to hire React developers, Next.js keeps you in the same ecosystem.

Here is what carries over directly:

The motion library. This is the exact animation engine that powers Framer’s visual editor. It is open source, maintained by the same team, and works in any React project. Every animation you built in Framer’s visual editor can be expressed in code:

import { motion } from "motion/react"

// Framer's hover scale effect → one line of code
<motion.div whileHover={{ scale: 1.05 }}>
  <Card />
</motion.div>

// Framer's scroll-triggered fade-in → three props
<motion.div
  initial={{ opacity: 0, y: 20 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  <FeatureSection />
</motion.div>

// Framer's spring physics → change the transition type
<motion.div
  initial={{ scale: 0.8, opacity: 0 }}
  animate={{ scale: 1, opacity: 1 }}
  transition={{ type: "spring", stiffness: 100, damping: 15 }}
>
  <Hero />
</motion.div>

// Staggered children → AnimatePresence + variants
<motion.ul>
  {items.map((item, i) => (
    <motion.li
      key={item.id}
      initial={{ opacity: 0, x: -20 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ delay: i * 0.1 }}
    >
      {item.title}
    </motion.li>
  ))}
</motion.ul>

Every animation you designed in Framer’s timeline editor can be written in a few lines of motion code. The API is well-documented, the community is large, and there are hundreds of examples and tutorials available.

React component libraries. In Framer, you are limited to Framer’s built-in components and “Code Components” (which are React components, but confined to Framer’s runtime). In a Next.js project, you have access to the entire React ecosystem:

shadcn/ui — Beautiful, accessible components that you own (not a dependency — the code is copied into your project)
Radix UI — Unstyled, accessible primitives for building custom UI
React Hook Form — Performant form handling
TanStack Table, TanStack Query — Data tables and data fetching
Recharts, Nivo — Data visualization

This is the full power of the React ecosystem, unconstrained by Framer’s component boundaries.

React developers. React is the most widely-used frontend framework. If you need to hire a developer to maintain your site, the pool of React/Next.js developers is enormous. Finding a “Framer developer” is much harder and more expensive, because Framer’s visual editor requires a specific skill set that is less transferable.

Framer’s breakpoint system vs responsive CSS

One of the technical challenges in any Framer migration is handling responsive design. Framer uses its own breakpoint system with specific widths (typically 1200px, 810px, and 390px for desktop, tablet, and mobile). You design the layout at each breakpoint independently.

In Next.js with Tailwind CSS, responsive design uses a mobile-first approach with standard breakpoints:

// A responsive hero section in Next.js + Tailwind
export function Hero() {
  return (
    <section className="px-4 py-16 md:px-8 md:py-24 lg:px-16 lg:py-32">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-3xl md:text-5xl lg:text-7xl font-bold">
          Your headline
        </h1>
        <p className="mt-4 text-lg md:text-xl text-gray-600 max-w-2xl">
          Your description text
        </p>
        <div className="mt-8 flex flex-col sm:flex-row gap-4">
          <Button size="lg">Primary CTA</Button>
          <Button variant="outline" size="lg">Secondary CTA</Button>
        </div>
      </div>
    </section>
  )
}

The key difference: Framer lets you visually adjust each breakpoint independently, which can lead to inconsistencies. Tailwind’s mobile-first approach builds up from the smallest screen, adding overrides at larger breakpoints. The result is typically more consistent responsive behavior, but it requires understanding the breakpoint system rather than visually dragging elements.

When migrating, screenshot your Framer site at each breakpoint and use those screenshots as reference for implementing the responsive behavior in Tailwind.

How to migrate: every realistic approach

AI coding agents (most efficient)

AI coding agents are the most common approach for Framer-to-Next.js migrations because the agent can handle both the content extraction and the React component generation.

Claude Code workflow (terminal-based):

Create a new Next.js project: npx create-next-app@latest my-site
Install the motion library: npm install motion
Open Claude Code in the project directory
Instruct it: “Visit [your-site.framer.app]. Extract all content, images, and design structure. Rebuild the site as Next.js App Router pages with Tailwind CSS and the motion library for animations. Match the visual design.”
Claude Code fetches the pages, analyzes the layout, and generates React components, page files, and content
Review the output. Request specific adjustments: “The navbar needs to be sticky and collapse to a hamburger on mobile,” “Add the spring animation to the feature cards on hover”
Download images from your Framer site and add them to the public/ directory
Deploy to Vercel: vercel deploy

Cursor or Windsurf workflow (IDE-based):

Create the Next.js project and install dependencies
Screenshot every Framer page at desktop, tablet, and mobile sizes
Open the project in Cursor or Windsurf
Paste screenshots into the agent: “This is my homepage. Rebuild it as a Next.js page component with Tailwind and motion. Here is the text content: [paste text]”
The agent generates components matching the visual design
Preview with npm run dev, iterate, polish

With Cline (VS Code extension):

Same project setup
Cline can autonomously browse your Framer site, extract content, and generate Next.js components
Review and approve each step

These agents are particularly good at generating React components from visual references. Framer’s typical aesthetic — clean typography, card layouts, gradient backgrounds, generous spacing — maps directly to Tailwind utility classes.

Time: A few hours to a couple of days for a typical 5-10 page site.
Cost: Agent subscription ($20-50/month) or API costs (usually under $20).

AI app builders

v0.dev is particularly relevant here because it is built by Vercel (the team behind Next.js) and generates React components with Tailwind CSS. Paste a screenshot of your Framer page, and v0 generates a matching React component that you can copy directly into your Next.js project.

Bolt.new can generate complete Next.js projects from descriptions and screenshots.

Lovable is a good choice if your migrated site needs backend functionality (forms, databases, user accounts).

Replit Agent can build and deploy a Next.js project entirely within Replit’s cloud environment.

Time: A few hours.
Cost: $20-30/month for paid tiers.

Hire a developer

This is a well-trodden path. Many developers have experience migrating sites from visual builders to Next.js.

Freelancers ($1,000-$5,000): On platforms like Upwork, Contra, and Toptal. Ask specifically for Next.js App Router experience and ask them to show previous work. A 5-10 page site typically takes 1-2 weeks.

Agencies ($5,000-$25,000): For complex sites with many pages, custom animations, authentication, or full-stack features. An agency handles the entire process from design extraction through deployment.

What to specify: Next.js App Router (not the older Pages Router), Tailwind CSS, motion library for animations, deployed to Vercel with the source code in a GitHub repo you own. Make sure the contract specifies code ownership.

Automated migration services

BrowserCat Migrate crawls your published Framer site and generates a codebase. The default output is Astro, which can be adapted to Next.js since Astro supports React components. If your target is Next.js specifically, AI coding agents or a developer will be more direct.

Manual rebuild

The most time-consuming approach, but complete control:

npx create-next-app@latest my-site — choose App Router, Tailwind CSS, TypeScript
npm install motion — the animation library
Set up your design system: colors, typography, spacing in tailwind.config.ts
Build layout components: Header, Footer, page wrapper
Recreate each page as a React Server Component, referencing your Framer site
For interactive sections, create Client Components with "use client" and motion animations
Migrate CMS content to markdown files (using a library like content-collections or next-mdx-remote) or to a headless CMS
Download all images from your Framer site
Test at every breakpoint
Deploy to Vercel: git push triggers automatic deployment

Time: 2-6 weeks depending on site complexity.

Next.js-specific migration considerations

Server Components vs Client Components

Next.js App Router introduces a distinction that matters for Framer migrations: Server Components run on the server and ship zero JavaScript. Client Components run in the browser and require JavaScript.

Most Framer content is static — it should be Server Components:

// app/page.tsx -- Server Component (default, no "use client")
export default function HomePage() {
  return (
    <main>
      <Hero />           {/* Static content -- Server Component */}
      <Features />       {/* Static content -- Server Component */}
      <AnimatedCTA />    {/* Interactive -- Client Component */}
      <Footer />         {/* Static content -- Server Component */}
    </main>
  )
}

Only add "use client" to components that need interactivity: animated sections using motion, interactive forms, carousels, accordions. This gives you a performance profile closer to a static site while keeping full React interactivity where you need it.

Image optimization

Next.js includes a built-in <Image> component that automatically optimizes images (resizing, format conversion, lazy loading). When migrating from Framer, replace <img> tags with <Image>:

import Image from 'next/image'

<Image
  src="/images/hero-photo.jpg"
  alt="Description"
  width={1200}
  height={800}
  priority  // Load immediately for above-the-fold images
/>

This alone can significantly improve performance compared to Framer’s image handling.

Content management

For blog content that was in Framer’s CMS, you have several options in Next.js:

Markdown files with a content library. Libraries like content-collections or next-mdx-remote let you write content in markdown/MDX and render it as React components.
Headless CMS. Services like Sanity, Contentful, Strapi, or Payload provide a visual editing interface (closer to Framer’s CMS experience) while storing content separately from your code.
Database-backed. For larger content needs, PostgreSQL with Prisma or Drizzle. This makes sense for sites with complex content relationships.

For most Framer migrations, markdown files are the simplest starting point. You can always add a headless CMS later if non-technical team members need a visual editor.

Framer vs Next.js: honest comparison

	Framer	Next.js
Code access	None	Full source code, you own everything
Animation library	Built-in (locked in)	`motion` (same engine, open source)
React components	Proprietary, non-exportable	Standard React, works anywhere
Hosting	Framer only	Vercel, Cloudflare, AWS, self-hosted
AI agent access	Cannot script the visual canvas	Full file access, complete automation
CMS	10-30 collections ($30-$45/mo)	Unlimited (markdown, headless CMS, database)
Custom code	Limited Code Components	Full access to any library
Monthly cost	$15-$45	$0 (Vercel free tier) to $20
Deployment	Framer publish button	Git push triggers automatic deploy
Collaboration	One canvas, linear autosave history	Git branches, pull requests, code review

The designer-developer workflow

A common pattern for teams migrating from Framer to Next.js:

Designers work in Figma. Figma is the industry standard for design, and it does not have the lock-in problem Framer has. Designs, components, and prototypes live in Figma.
Developers implement in Next.js. Using the Figma designs as reference, developers (or AI agents) build React components with Tailwind CSS and motion.
Deploy previews bridge the gap. Every pull request gets a live preview URL on Vercel. Designers review the implementation on a real URL, leave comments, and approve before changes go live.
AI agents accelerate both sides. Designers can use AI tools to generate Figma components. Developers can use Claude Code or Cursor to implement designs from Figma screenshots. The AI works on both sides of the workflow.

This is the workflow used by most professional product teams. It is more structured than Framer’s “designer edits the canvas and publishes,” but it scales better and eliminates the single-platform dependency.

When to stay on Framer

Framer is the right tool when:

You are a solo designer who builds and publishes without developer involvement, and you do not plan to change that.
The site is short-lived. Campaigns, event pages, or prototypes that will not exist in 6 months.
You are prototyping. Framer’s rapid iteration speed is genuinely valuable during the design exploration phase. Build in Framer, then implement the final design in Next.js.
The site is very simple. If the free plan or $15/month Mini plan covers your needs and the lock-in does not concern you, the migration effort may not be justified.

The bottom line

Framer uses React. Next.js is React. The animation library that powers Framer’s visual editor is an open-source React library you can use in any Next.js project. The migration is not about learning a new technology — it is about moving from a locked-in proprietary version of the same technology to the open version.

The practical challenge is that Framer offers no export. You cannot click “export to Next.js” and get a project. Instead, you rebuild from the published output — using AI agents, app builders, hired developers, or manual effort. The tools for this rebuild have gotten dramatically better. What once took weeks of manual work can now be accomplished in hours with the right AI agent.

The result is a standard React codebase that you own, deploy anywhere, and can hand to any developer in the world. The same animations, the same design, the same content — built on the same underlying technology Framer uses, without the lock-in.