Moving your site from Framer to Next.js
Framer is a great way to get a site live. You design on a canvas, hit publish, and you have a fast site with a CMS and nice animations.
Then the bill keeps coming. You pay per site, every month, with extra seats for every editor on top. And the site lives in Framer, so the things it doesn’t do, you can’t add.
More teams are moving their sites to their own code, usually Next.js or Astro, hosted for free on Cloudflare. AI coding tools like Claude Code made that switch much easier, since editing a site in code no longer needs a developer for every change.
This guide covers how to move, and when you shouldn’t.
Why teams move off Framer
- A monthly fee per site, plus editor seats
- CMS, page and bandwidth limits tied to the plan
- No code you own, and no official export
- Custom features that need a workaround or a plugin
- A site that can’t share code with the product
In code, the site is yours. It lives in your repo, costs little or nothing to host, and can do anything a web page can do. That means your own analytics, generated OG images, internal tools and pages that pull from your product’s data.
What Framer’s plans limit
Framer charges per site, per month, and every plan comes with limits. Pages, CMS collections, CMS items and bandwidth are all counted, and features like redirects, staging and A/B testing sit behind the higher plan or cost extra on top.
| Compare | Your own code | Framer Basic | Framer Pro |
|---|---|---|---|
| Price per site | $0 to host | from $10 / month | from $30 / month |
| Pages | no limit | 30 | 150 |
| CMS collections | no limit | 2 | 10 |
| CMS items | no limit | 1,000 | 2,500 |
| Bandwidth | no cap | 50 GB | 100 GB |
| More bandwidth | free | $40 per 100 GB | $40 per 100 GB |
| Redirects | included | not included | included |
| Staging | a preview for every change | not included | included |
| Localization | no extra fee | $20 per locale | $20 per locale |
| A/B testing | no extra fee | not included | paid add-on |
| Extra editors | anyone on the repo | paid seats | $20 / month each |
Framer’s US prices billed yearly, from framer.com/pricing in October 2026. Monthly billing costs more, and prices vary by country.
The price is per site, so a second site or a separate docs site doubles it. And as the site grows, the limits push you up a plan or into add-ons. Each extra 100 pages is $20 a month, and each extra 100 GB of bandwidth is $40.
In code, none of these are plan features. Redirects are a text file, every change gets its own preview link, and a new collection is a new folder. Cloudflare serves static files on its free plan with no bandwidth cap, so a site that gets popular doesn’t get more expensive.
Can Framer export your site as code?
Not officially. Framer doesn’t offer a way to download your site as code or host it somewhere else. There are third-party plugins that export components or whole pages to React and Next.js, some of them paid.
They’re useful as a reference, but the output is rarely code you’d want to keep. It mirrors how Framer builds the page, not how you’d write it by hand. For most sites, rebuilding is cleaner, and with an AI agent it isn’t much slower.
Next.js or Astro?
For a marketing site with a blog, Astro is usually the better fit. It renders every page to plain HTML at build time and ships almost no JavaScript, so the site is fast by default. This site is built that way, with Astro on Cloudflare.
Next.js makes more sense when the site is part of an app, or when your product already uses it. Then the marketing pages can share components and code with the product.
Both work with React, so interactive pieces like a pricing calculator or an animated hero carry over either way.
How to move a site off Framer
1. List everything the site does
Write down every page, every CMS collection, every form, the redirects, the integrations (analytics, cookie banner, chat) and the animations you care about. It’s easy to forget a form that quietly sends leads somewhere.
2. Set up the design first
Before building pages, pull the colors, fonts, spacing and corner radii out of Framer into one place in code. Every page built after that matches the design without guessing.
3. Rebuild the pages, section by section
Give your agent the live page and a screenshot, and build one section at a time. Compare it with the Framer version in the browser, on a phone and on a wide screen, before moving on. Animations come last, once the layout is right.
4. Move the content
Export each CMS collection as CSV with Framer’s CMS Export plugin, and turn it into Markdown files or a content collection. Blog posts, case studies and team pages all fit this way, and they end up in your repo with history.
5. Keep your SEO
Keep every URL the same, or add a permanent 301 redirect for each one that changes. Carry over page titles, descriptions and OG images, and generate a sitemap. That’s what keeps your rankings through the move.
6. Replace forms and analytics
Framer handles forms for you. In code, a form needs somewhere to send its data, like a form service or a small serverless function. For analytics, a simple tool like Umami or Plausible is enough for most sites.
7. Switch the domain
Deploy to Cloudflare, check every page on a preview URL, then point your domain at it. Keep the Framer site until the new one has been live for a few days. Then submit the sitemap in Search Console and cancel the plan.
Doing it yourself with Claude Code
A small site is a good first project for Claude Code or a similar agent, even if you’re not a developer. You describe what you want, it writes the code, and you check the result in the browser.
Where it goes wrong is the same place most AI-built code goes wrong. The agent copies a section instead of reusing it, invents a new color instead of using the right one, and says the page is done when it looks fine on one screen size. Point it at your design tokens, ask it to reuse components, and check every page on a phone.
After the move, editing works the same way. Ask the agent to change a headline or add a blog post, review the change and publish. Content lives in your repo, so nothing is locked behind a seat.
When to stay on Framer
If your marketing team edits the site every day on the canvas and nobody wants to touch code, Framer is earning its price. The same goes for a site that changes layout every week as you test new ideas.
Moving makes the most sense when the site has settled down, the monthly bill keeps growing, or you need it to do things Framer can’t.
How Frontend Supply works
Frontend Supply is a monthly frontend subscription for startups. If you need ongoing frontend work, moving your site off Framer can be the first thing I do. I design in code, so the site keeps its look, its URLs and its rankings, and it ships to your repo.
It’s one senior frontend engineer and a set of AI agents. I lead them like a team. I plan the work, set the architecture and component APIs, and correct them when they cut corners or use bad patterns. They work in parallel, so your product gets about 12 hours of work a day.
It’s $5,000 a month, with no contract. You can start with a one-week trial for $1,250. More about me.
When your site has outgrown Framer, I make sure it moves without losing anything on the way.
FAQ
Will I lose my Google rankings?
Not if every URL stays the same or redirects with a 301, and the titles and content carry over. Rankings can move a little for a few weeks after any site change, then settle.
Can I keep my Framer animations?
Yes. Most Framer animations can be rebuilt with CSS or with Motion, the library Framer Motion grew into. Some end up smoother, because you control every detail.
How much does hosting cost?
For a static site, nothing. Cloudflare serves static files on its free plan with no bandwidth cap, so the monthly Framer fee goes away entirely. Server features like form handling also fit in the free plan for most sites.
Can my team still edit the site?
Yes, through an AI agent like Claude Code, or by connecting a headless CMS if your team wants a visual editor for content.