A Framer to Next.js migration is a rebuild, not an export. Framer won't let you download your site as code, so the design gets rebuilt as React components, the Framer CMS content goes out as CSV and into a new CMS, and every URL either keeps its path or gets a permanent redirect in next.config.js so your SEO survives. Market prices run from about $1,000–$5,000 with a freelancer for a 5–10 page site, up to $8,000 for a typical business site, and $5,000–$25,000 with an agency for a complex site, and most Framer sites of up to 20 pages take three to five weeks to move.
I've taken a site off Framer myself. I moved the Aura Clips agency site from Framer to WordPress on Bricks Builder, with service templates, a blog, GA4 and Tag Manager. The groundwork barely changes whether you land on WordPress or Next.js. You list every URL, get the content out, rebuild the templates and redirect anything that moves. This post covers the Next.js version of that job.
Can you export a Framer site to Next.js?
No, not natively. Framer's own help centre says it does not offer HTML export for self-hosting, because publishing, image optimisation and rendering all run on Framer's infrastructure.
Third-party converters try to fill the gap. Deframer, Full Site Export and ConvertFramer (around $15 per page) capture your published pages and wrap them in a React or Next.js project. They're handy for a reference copy or a quick prototype. For a site you'll be maintaining for years, I'd treat the output as a starting point and nothing more. You get static markup full of Framer's generated class names, and as one migration studio puts it, "CMS data isn't included."
What moves from Framer and what gets rebuilt?
Content moves. Design and behaviour get rebuilt. Page copy, CMS collections, images, redirects and meta tags carry over, while layouts, animations, forms and analytics are recreated in the Next.js codebase.
| Part of the site | What happens in the migration |
|---|---|
| Page copy and headings | Moves. Copied or scraped page by page, then checked |
| CMS collections (blog, case studies, team) | Exported to CSV with Framer's CMS Export plugin, then imported with a script |
| Images and video | Downloaded and re-hosted. Don't leave them loading from Framer's CDN |
| Layouts and sections | Rebuilt as React components, usually with Tailwind CSS |
| Animations and interactions | Recreated with the Motion library or plain CSS. Framer's animation system doesn't translate |
| Forms | Rebuilt and wired to HubSpot, email or your CRM |
| Existing Framer redirects | Exported in bulk (Framer guide) and added to the Next.js config |
| Titles, meta descriptions, Open Graph images | Carried over page by page, then improved |
| Built-in Framer analytics | Doesn't move. Replaced with GA4 and Google Tag Manager, or a privacy-first tool |
The rebuild is where the money goes. A page a designer put together in Framer in an afternoon turns into a set of React components, props and responsive rules. You get that time back later, though. Once a section exists as a component, every new page can reuse it.
How much does a Framer to Next.js migration cost?
Expect roughly $1,000–$5,000 with a freelancer for a 5–10 page site, up to $8,000 for a typical business site, and $5,000–$25,000 with an agency for a complex site, with redesigns reaching $15,000–$50,000. The published ranges are all over the place, mostly because some quotes are like-for-like rebuilds and others quietly include a redesign.
| Who does the work | Typical price | Typical timeline | Source |
|---|---|---|---|
| Freelancer, 5–10 page site | $1,000–$5,000 | 1–2 weeks | BrowserCat |
| Freelancer, typical business site | $3,000–$8,000 | 2–4 weeks | MigrateLab |
| Fixed-price studio, ~20 pages | $5,000–$12,000 | 4–8 weeks | MigrateLab |
| Migration specialist, up to 20 pages | From $4,500 | 3–5 weeks | Valiance Labs |
| Agency, complex site | $5,000–$25,000 | Varies | BrowserCat |
| Agency, new design and build | $15,000–$50,000 | Varies | Designme |
What actually moves your quote:
- Unique templates, not page count. Twenty CMS posts on one template cost far less than twenty one-off landing pages.
- CMS volume and structure. Rich text, references between collections and image fields all have to be mapped into the new CMS.
- Animation depth. Scroll-triggered sequences and page transitions take the longest to get right.
- Redesign or like-for-like. Change the design during the move and it's a new build with a migration bolted on.
- Integrations. Forms, CRM, booking, search and localisation each add scope.
Your running costs change too. Framer's Pro plan is $30 a month billed yearly, plus $20 a month per editor seat. On the Next.js side, Vercel's free Hobby plan is for personal, non-commercial use only, so a business site usually runs on Vercel Pro at about $20 a month per member or on Cloudflare, plus whatever your CMS charges. If you're still picking a host, compare Vercel and Cloudflare before you commit.
Which CMS should replace the Framer CMS?
Pick it by who edits content every week. Sanity or headless WordPress for marketing teams, Payload if you want the CMS inside the Next.js app, and Markdown or MDX for sites only developers touch.
| CMS option | Best for | Editing experience | Cost note |
|---|---|---|---|
| Markdown or MDX in the repo | Developer-run sites, docs, small blogs | Edit files, publish through Git | No CMS fee |
| Sanity | Marketing teams publishing often | Hosted editor, structured content | Free plan covers 20 seats and 10,000 documents; Growth is $15 per seat a month |
| Payload | Teams who want the CMS inside the Next.js app | Admin panel you host yourself | Open source, you pay for hosting and a database |
| Headless WordPress | Teams who already know WordPress | The familiar WordPress editor | WordPress hosting plus the Next.js frontend |
If your marketers liked the Framer CMS because it was simple, give them a hosted editor like Sanity or the WordPress dashboard. Handing them Markdown files will feel like a step backwards. If only developers edit content, files in the repo are the cheapest and quickest option. When a team already knows WordPress, I build it as a headless WordPress setup so they keep the editor they're used to.
How do you map redirects from Framer to Next.js?
List every Framer URL, keep as many paths as you can, and add a permanent redirect in next.config.js for each URL that changes. This is the step that protects your rankings. Google's site move guide starts with redirecting old URLs to the new ones and then submitting the new sitemap in Search Console. The process is the same for any move onto Next.js, and I cover it in more depth in moving from WordPress to Next.js without losing SEO.
- 1
Build the URL inventory
Combine the live sitemap, Search Console's page report and your analytics top pages, so you catch every URL that ranks or earns links.
- 2
Export Framer's existing redirects
Pull the redirects already set in Framer so old chains don't carry over into the new site.
- 3
Decide keep or redirect
Keep every URL you can at the same path. Only map a new address where the structure really changes, such as a CMS prefix moving from /posts to /blog.
- 4
Generate the redirects
Turn the old-to-new pairs into a redirects() array in next.config.js with permanent set to true, and check for chains and loops.
- 5
Test before DNS changes
Crawl the staging site with the old URL list and confirm every one returns 200 or a single permanent redirect.
- 6
Launch and monitor
Switch DNS, submit the new sitemap and watch Search Console coverage and 404s for the next few weeks.
For the launch step, run through my technical SEO checklist for Next.js so sitemaps, canonicals and metadata are right on day one. If traffic still dips afterwards, my guide to recovering from a traffic drop after a redesign walks through the checks.
In Next.js, a redirect in next.config.js with permanent: true returns a 308 permanent redirect. Search engines treat that as a permanent move, same as a 301.
My free Redirect Map Builder handles the generating. Paste old and new URL pairs and it gives you a redirects() array for next.config.js, flagging chains, loops, duplicates, trailing slashes and query strings. I built it with WordPress exits in mind, so its pattern suggestions are aimed at WordPress archives and dated permalinks. For a Framer site, just paste explicit pairs and the output is just as clean.
Watch the Framer leftovers
Two things bite at launch: images still loading from Framer's CDN, and a live framer.website or framer.app copy of your site. Re-host every asset, then unpublish the old Framer project once the redirects are verified.
Valiance Labs flags the same two risks, leftover images and the Framer subdomain, as the main things to sort out at launch.
Framer to Next.js or Framer to WordPress?
Go with Next.js if a developer will look after the site or you need app-like features. Go with WordPress if your marketing team has to build pages without a developer. Both work, and I've written up the Framer to WordPress route separately.
| Factor | Framer to Next.js | Framer to WordPress |
|---|---|---|
| Who edits pages | Developers build sections, editors fill a headless CMS | Editors build pages in Bricks or Elementor |
| Code ownership | Full source in your Git repo | Theme and content in your WordPress install |
| Hosting | Vercel, Cloudflare or any Node host | Any PHP host |
| Speed ceiling | Very high, server-rendered React | High with a lean builder and caching |
| Custom features and apps | Natural fit, it's already an app framework | Plugins and custom PHP |
Next.js is also the better pick if you want the marketing site to share code with your product, or you're planning features a page builder can't handle. WordPress wins when page building has to stay with the marketing team. Aura Clips went the WordPress route, rebuilt on Bricks with service templates, a blog, and GA4 through Tag Manager.
How long does a Framer to Next.js migration take?
One to two weeks for a 5–10 page site, and three to eight weeks for a site of around 20 pages. Small sites can be rebuilt in one to two weeks. Sites of up to 20 pages usually take three to five weeks, and fixed-price rebuilds of a 20-page site are quoted at four to eight weeks. If you've got several CMS collections, localisation or heavy animation, plan for the long end.
Most of the time goes on building components, importing content and testing redirects. The DNS switch is the shortest part of the whole job, provided the redirects were tested first.
What should you ask a developer before hiring?
Start with how they'll handle your Framer CMS content, your URLs and your redirects. Those decide whether you keep your rankings. Then ask about the rest:
- How will you get my CMS content out of Framer, and will images be re-hosted?
- Can I see the URL inventory and redirect map before launch?
- Which pages keep their exact URLs, and which change?
- How will you recreate the animations, and which ones are out of scope?
- Which CMS do you recommend for my editors, and why?
- What happens to forms, analytics and Search Console on launch day?
- What Core Web Vitals scores will you test against before sign-off? (This is the kind of work my technical SEO and Core Web Vitals service covers.)
In my view, a developer who gives clear answers on redirects and content is worth more than one who shows you the slickest Framer replica.
Ready to move off Framer?
Send me your Framer URL and tell me who edits the site. I'll come back with the templates that need rebuilding, a CMS recommendation and the list of URLs that need redirects. You can see how I work on the Next.js and React websites page, or book a 20-minute call and we'll talk it through.
