Convert Framer to Next.js: The Complete Guide

Converting Framer to Next.js takes one step: paste your published Framer URL into the converter and download a complete Next.js App Router project. No plugin, no API key, no rebuild. Each Framer page becomes a statically-prerendered route that renders identically to the original — animations included. This guide covers how the conversion works, what you get, how to deploy it, and when the HTML export is the better choice instead.

Why convert Framer to Next.js?

Framer is a design tool with hosting attached; Next.js is a production web framework. Moving from one to the other gets you:

• Real code you own. A standard Next.js project a developer can extend — add routes, API handlers, auth, a CMS, anything.
• No hosting lock-in. Deploy to Vercel, Netlify, or your own infrastructure. Your site no longer depends on a Framer subscription.
• A normal dev workflow. Git, code review, CI/CD, preview deployments — the things teams expect once a site matters.
• A migration path, not a rebuild. Rebuilding a Framer site in Next.js by hand takes days or weeks. Conversion takes a minute and is pixel-identical.

How the conversion works

The converter works from your site's published URL — the same pages your visitors see:

1. Page discovery. Every public page is found automatically, including nested routes like /work/project-name.
2. Capture. Each page's fully server-rendered HTML is captured exactly as Framer publishes it — content, meta tags, and the runtime.
3. Project generation. Each page becomes app/<route>/route.ts in a fresh Next.js App Router project — a statically-prerendered route that serves the page verbatim. package.json, tsconfig.json, and config files are generated so the project builds immediately.
4. Download or deploy. Grab the .zip, or push it to Vercel/Netlify in one click.

Because the Framer runtime is kept intact in this mode, everything behaves exactly like the original — Framer Motion animations, hover states, carousels, custom cursors, the lot.

What you get in the project

my-site/
├── app/
│   ├── route.ts              ← home page
│   ├── about/route.ts
│   ├── work/
│   │   ├── route.ts
│   │   └── project-a/route.ts
├── package.json              ← next, react, react-dom
├── next.config.js
└── tsconfig.json

Run npm install && npm run build — it compiles like any Next.js app. Every route is force-static, so builds are fast and the output is fully prerendered, crawlable HTML.

Deploying your converted project

• Vercel — the natural home for Next.js. One-click deploy from the converter with your token, or vercel deploy from the CLI.
• Netlify — equally one-click from the tool; the export also works with Netlify's Next.js runtime.
• Anywhere else — it's standard Next.js; Docker, Cloudflare, or a Node server all work.

Then point your custom domain at the new host, and your Framer plan is no longer keeping the site alive. Full DNS walkthrough in the self-hosting guide.

Next.js export vs HTML export — pick deliberately

	Next.js export	HTML export (Hybrid)
Output	Real Next.js project	Optimized static bundle
Framer runtime	Kept (exact behavior)	Stripped (max speed)
Lighthouse Performance	Same as original	Typically 90–100 desktop
Complex effects (WebGL, cursors)	✓	Trimmed
Best for	Dev teams, exact fidelity	Marketing sites, speed

Rule of thumb: if a developer will touch the site next, take Next.js; if speed is the goal, take HTML — and you can run both, then compare Lighthouse scores to decide with data.

SEO when migrating

The export preserves your titles, descriptions, Open Graph tags, and URL structure, so search engines see the same pages at the same paths. Keep your domain and rankings carry over. If you're also chasing higher scores, the HTML mode's SEO pass (canonical repointing, WebP images, runtime removal) is what pushes Lighthouse SEO to 100 — details in the Framer to HTML guide.

Honest limitations

• Public pages only. Password-protected pages can't be read by the converter.
• Framer's form backend stays with Framer — swap form actions to Formspree, Tally, or your own endpoint after migrating.
• CMS collections are exported as the rendered pages that exist at conversion time; new CMS entries after that require a re-convert (it's free, so re-run any time).

Convert your site now

Paste your published Framer URL into the Framer to Next.js converter — free, under a minute, and you'll have a project you can build on for years.