Own Your Framer Site as Real Next.js Code
Paste a published Framer URL and get a real, deployable Next.js App Router project — one statically-prerendered route per page that renders identically to the original, animations included. Stop paying for Framer hosting and own the code instead.
Why real Next.js code, not just faster hosting
No more monthly Framer hosting fee, no editor lock-in. Deploy the project to your own Vercel or Netlify account and it's genuinely yours from that point on.
Framer's own export always ships without html[lang], iframe titles, a main landmark, or accessible names on icon-only links. This conversion fixes all four — measured improving on 10/10 real templates we tested.
A real package.json, tsconfig, and App Router project — open, editable, and portable to any host that runs Next.js, not tied to this tool after you download it.
Prefer the terminal? There's a CLI
The same converter as an npm package — works from any published Framer URL, no login here either. One command writes the full Next.js project to disk (or the runtime-stripped static bundle with --mode hybrid):
npx framer-to-nextjs https://your-site.framer.website
Free on npm — scriptable in CI, Makefiles, or a nightly rebuild job.
How to convert Framer to Next.js
- 1Publish your Framer site
Make sure the site is live on a public URL, like https://your-site.framer.website or a custom domain.
- 2Paste the URL and convert
The converter discovers every page and generates one prerendered Next.js route per page — no plugin or code needed.
- 3Download the project
Get a complete Next.js App Router project as a .zip: run npm install && npm run build and it's ready.
- 4Deploy anywhere
Push it live to Vercel or Netlify in one click, or deploy through your own pipeline like any Next.js app.
Convert Framer to Next.js — FAQ
Does Framer officially support Next.js export?+
No. Framer has no built-in code export — published sites stay on Framer's hosting. This converter fills that gap: it turns your published Framer site into a real Next.js App Router project you own and can deploy anywhere.
What exactly do I get from the Next.js export?+
A complete, deployable Next.js project: one statically-prerendered App Router route per Framer page, plus package.json, tsconfig, and config. Run npm install && npm run build and it deploys like any Next.js app.
Do my Framer animations and interactions still work?+
Yes — exactly, because each page keeps Framer's own runtime and CDN assets intact. The Next.js project just wraps and serves the original page verbatim, so every animation, hover, and interaction behaves identically to the source instead of being approximated.
Do I need my Framer login or an API key?+
No. Only the public published URL is needed. No Framer account access, no API key, nothing to install.
Are SEO meta tags, Open Graph, and canonicals preserved?+
Yes. Each exported page keeps its title, description, and Open Graph tags. The Hybrid (HTML) mode additionally rewrites canonicals to your new domain and runs a full SEO pass.
Can I host the export on Vercel, Netlify, or Cloudflare?+
Yes. It's a standard Next.js project, so it deploys to Vercel or Netlify in one click from this tool (or anywhere Next.js runs, including Cloudflare). You can also download the .zip and use your own pipeline.
Next.js export vs HTML export — which should I choose?+
Choose Next.js when you want a real Next.js App Router project — package.json, TypeScript config, npm install && npm run build — wrapping the original Framer page so it keeps every animation and interaction exactly as authored. Choose the HTML export when you want plain static files with zero framework instead. You can run both and compare.
Is exporting my Framer site legal?+
Yes, for your own site. The converter only works with public published URLs, and you should only convert sites you own or have permission to export. It never bypasses logins or accesses private drafts.
How long does the conversion take?+
Usually under a minute. Multi-page sites are discovered and converted automatically; larger sites can take a few minutes.
Is it free?+
Yes — converting, previewing, and downloading the project are free. Deploying uses your own free Netlify or Vercel account, and there are no per-site fees.
Will this make my site faster?+
Not necessarily, and we'd rather tell you that upfront than oversell it. This export keeps Framer's own runtime intact so animations and interactions stay exactly as authored — which means it carries over the same JS/image weight the original had. We tested this directly across 10 real templates and published the honest results. If maximum Lighthouse score matters more than pixel-perfect fidelity for your site, use the Hybrid HTML export instead, which strips the runtime and rebuilds for speed.
Is there a CLI or npm package?+
Yes. Run npx framer-to-nextjs <your-framer-url> in a terminal and the same converter writes the full Next.js project straight to disk — or the runtime-stripped static bundle with --mode hybrid. It works from any published Framer URL with no login or plugin, and being a normal npm package, it's scriptable in CI or a nightly rebuild job.
Is the generated code clean, hand-editable React components?+
No, and we'd rather say so than oversell it: each page ships as a single, byte-exact HTML string, because decomposing it into separate JSX components breaks Framer's runtime hydration (we measured this directly — 94 down to 62 mobile Performance). Every route.ts file does include an orientation comment with the page's nav links and heading outline. For genuinely clean components, the realistic move is refining the deployed export with an AI coding assistant afterward, extracting one static section at a time — see the full breakdown below.
More on the components question above: why the export isn't pre-split into components, and how to refine it into clean ones with Cursor or Claude Code.