Choose the HTML export when speed and simple hosting matter most; choose the Next.js export when you need a Next.js project and want to retain Framer's runtime. Both start from the same published Framer site and aim to preserve its design — the difference is what happens to Framer's JavaScript runtime, and that one decision drives everything else: performance, hosting options, and what "editing" looks like afterwards.
The one decision underneath both exports
Every published Framer page ships a large JavaScript runtime that re-renders the page in the browser. An export has to do something with it:
- Strip it → the page becomes pure HTML/CSS. Much faster, but runtime-driven effects need rebuilding. This is the HTML (Hybrid) export.
- Keep it → the export retains Framer's runtime for closer interaction fidelity; you still need to test the result. This is the Next.js export.
Neither is "better" — they optimize for different futures of the same site.
What each output actually is
HTML export: a folder of static files — one clean .html per page, self-hosted WebP images, inlined fonts. Appear/scroll animations are rebuilt in lightweight CSS + IntersectionObserver. An SEO pass repoints canonicals to your domain, fixes alt text, and removes the Framer badge. Host it anywhere that serves files.
Next.js export: a complete Next.js App Router project — one statically-prerendered route per page serving your site verbatim, plus package.json/tsconfig/config so npm install && npm run build works immediately. It's a real React codebase you can extend.
Head to head
| HTML export | Next.js export | |
|---|---|---|
| Framer runtime | Stripped | Kept |
| Performance | Often lighter after runtime removal; measure your site | Retains Framer's runtime weight; measure your site |
| SEO checks | Review the generated metadata and deployed URLs | Review the generated metadata and deployed URLs |
| Complex effects (WebGL, custom cursors) | May need rebuilding | Runtime retained; test each effect |
| Appear/scroll animations | ✓ rebuilt in CSS | ✓ original |
| Hosting | Any static host, no build step | Vercel/Netlify/anywhere Next.js runs |
| Editing afterwards | Visual editor, or edit the HTML | Visual editor, or real code |
| Best for | Marketing sites, portfolios, landing pages | Dev handoff, runtime fidelity, future features |
Decision guide
Take the HTML export if…
- The site is a marketing site, portfolio, or landing page
- You want the highest Lighthouse / Core Web Vitals scores possible
- You want drag-and-drop simple hosting (Netlify Drop, GitHub Pages, S3)
- Nobody plans to "develop" the site — just occasional content edits
Take the Next.js export if…
- A developer will own the site next
- You need to retain the original runtime for complex effects and can test them before launch
- You plan to add features (auth, API routes, a CMS) on top
- You're migrating toward React incrementally — see Framer to React
Genuinely unsure? Run both — conversions are included with FNJ Lifetime — and put the results through PageSpeed Insights. The numbers usually make the decision for you: if the HTML export's speed gain matters for your traffic, take it; if the delta is small and you want code, take Next.js.
The same either way
Multi-page discovery with preserved URLs, SEO meta and OG tags carried over, badge removal, one-click Netlify/Vercel deploy, the post-export visual editor, and the public-URL-only limitation (password-protected pages can't convert). Full walkthroughs: how to export a Framer website and the complete Next.js guide.
Convert your site and try both outputs on your own pages.
For a hands-on release test, use the Next.js interaction QA checklist. If you choose HTML, inspect remaining external dependencies before ending your Framer hosting.