What does a Framer to Next.js migration actually cost?

A Framer to Next.js migration costs mostly time: hours to build or review the code, test it and cut over, multiplied by an hourly rate. Tool fees are small next to that. A manual rebuild puts every hour into building; an automated conversion moves most hours into review and fixes; an agency bundles both into a quote. After launch you pay for hosting, any CMS or form services, and maintenance. Converting to TanStack Start, Astro, React Router or Vite instead costs the same.

There's no honest single price, because page count, CMS, animations and your team's rate vary too much. This post gives you the cost lines, a worksheet to fill in, and a worked example whose numbers are labelled assumptions, not market averages. Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer; we make Deframer, one of the conversion options below.

What drives the cost of a migration?

Six things, roughly in order of impact:

1. Number of unique layouts, not pages. Ten blog posts on one template are one layout; ten bespoke landing pages are ten.
2. Breakpoints and interactions. Each layout has desktop, tablet and phone versions, plus hover states, scroll effects and transitions.
3. CMS. Collections, detail pages, and how editors will add content afterward.
4. Forms and integrations. Where submissions go, analytics, chat widgets, embeds.
5. SEO continuity. Matching URLs, metadata, redirects and the sitemap so you don't lose traffic.
6. Who does the work and at what rate: an in-house developer, a freelancer, an agency.

Cost by approach

Manual rebuild

You recreate the site in Next.js using the Framer site as the reference. Every hour is building: layout, three breakpoints, components, animations, CMS templates, forms, metadata. It's the most expensive approach for a faithful copy and the most sensible when you're redesigning anyway, because you'd be changing the layouts regardless.

Automated conversion plus review

A converter writes the project, and your developer reviews it instead of building it. The hours shift to checking each page at each width, fixing differences, setting form destinations, reviewing metadata and deploying. Tool fees are usually small; Deframer, for example, is free to convert and costs 1 credit (with a verification tag) or 10 credits (without) to download a project, from packs of $10 for 1 credit, $25 for 5 or $100 for 30, or $397 once for free verified downloads for life, as of October 2026. See pricing. Other tools charge per page, per export or by subscription; best Framer to Next.js converters in 2026 lists them.

Don't skip the review. Even when a conversion looks right, someone has to own the result: check forms, CMS pages and metadata, and know where things live in the code.

Agency-led

An agency rebuilds or converts and delivers a finished site. You pay their quote, which already contains their hours and margin, plus your own time for briefing, feedback and acceptance testing. Ask whether they use a converter and what the quote assumes about review. Agency workflow for converting client Framer sites describes how agencies use Deframer for client sites.

Hosting, CMS and maintenance after launch

Leaving Framer replaces one plan fee with separate lines: hosting, forms delivery, an optional headless CMS, and developer time for edits and dependency updates. That comparison has its own post with a worksheet: Framer hosting vs self-hosting costs. If editors need to add content without a developer, budget for adding a headless CMS.

The worksheet

Copy this table and fill in your own numbers. Use your team's real rate, or a freelancer's or agency's quoted rate. Count unique layouts, not pages.

For the agency column, the quote replaces the labor line except for your own time (Y × H).

A worked example (assumptions, not averages)

To show how the worksheet behaves, here's one example. Every number is an assumption we chose for illustration; none is a market average or a measurement. Replace them with yours.

Assumed site: 6 unique layouts (home, about, pricing, blog index, blog post, contact), one CMS collection, one contact form, three breakpoints, moderate animation.

Assumed rate: H, which you fill in. The totals below are written in hours so they hold at any rate.

How to read it: at any rate H, the gap between columns is the build hours that review replaces. The example's ranges are wide on purpose. Sites with custom code components, many locales or heavy scroll effects push review hours up; a simple portfolio pushes them down. If your own first conversion shows many layouts needing fixes, raise R; if you're redesigning, the conversion column stops being comparable, because you'd change the layouts anyway.

Costs people leave out

• Content freeze. Edits made in Framer during the migration have to be carried over. Agree a freeze date, or plan to re-convert before cutover.
• Redirects and SEO checks. Matching URLs, metadata and the sitemap takes time even when the tool does most of it. SEO when moving off Framer has the steps.
• Framer plan overlap. Keep the Framer site live until the new one is verified; see before you cancel your Framer plan.
• Form email. Sending submissions by email needs an email provider, usually priced by volume.
• Learning time. If nobody on the team has shipped a Next.js site, the first months include learning.
• Editors. If marketing edits the site weekly, every change becomes developer time unless you add a CMS.

How do you keep the cost down?

1. Count layouts first. It's the multiplier in every column.
2. Convert before you quote. A free conversion shows how much of the site comes out right, which turns R from a guess into an estimate.
3. Separate migration from redesign. Migrate as is, launch, then redesign in code, or redesign in Framer first and migrate once.
4. Keep CMS as JSON at first. Converted collections live in src/cms/*.json; add a headless CMS only when editors need it. See Framer CMS to JSON in Next.js.
5. Use a checklist. The Framer to Next.js migration checklist keeps cutover tasks from being forgotten.