How to export a Framer site to Next.js
Export a Framer site to Next.js step by step: convert, compare, verify ownership and download an App Router TypeScript project, then check it.
Blog
Notes on leaving Framer.
Guides to moving a Framer site to Next.js and TypeScript, and running it after. RSS
Results
15 posts on Next.js
Framer to HTML or Framer to Next.js, which do you need?
Framer to HTML gives you a static snapshot; Framer to Next.js gives you a project to keep building. Compare editing, CMS, forms, SEO and hosting.
Framer vs. Webflow vs. Next.js, which fits your site?
Framer vs Webflow vs Next.js compared on editing, CMS, code ownership, hosting and team fit, with a simple way to choose and a path between them.
Framer vs. Next.js for growing sites
Framer vs. Next.js for a growing site: when to stay and when to move, judged on team skills, backend needs, content workflow and cost.
What you get in a converted Next.js project
What a Framer site converted to Next.js contains: a folder-by-folder tour of routes, views, components, tokens, CMS JSON, the kit and README.
Framer CMS limits: what to do when you outgrow them
Framer CMS limits on items, collections and pages explained, the signs you're outgrowing them, and four ways forward, from add-ons to JSON in Next.js.
Is Framer good for SEO, and what does Next.js change?
Framer handles SEO basics well. Here's what it covers, where its limits show, and what moving the site to Next.js changes for metadata, schema and sitemaps.
What happens to Framer CMS collections in Next.js?
Framer CMS collections in Next.js become JSON files with a schema. How to edit records, add items, and handle rich text, images and locales.
How do Framer forms work after moving to Next.js?
Framer forms after moving to Next.js: each form gets its own API route. Connect webhooks or email, and test every form route with curl.
Is Framer built on React? Getting React code from a Framer site
Framer sites run on React, but you can't download them as React code. How to get React components out of a Framer site, and what to expect in them.
Performance tuning a converted Framer site in Next.js
Speed up a Framer site converted to Next.js: measure first, then tune fonts, images, browser-only components, scripts and caching headers.
Adding a headless CMS to a converted Framer site
Add a headless CMS to a Framer site converted to Next.js: sync entries into the JSON the pages already read, and redeploy when editors publish.
How multi-locale Framer sites work in Next.js
Multi-locale Framer sites in Next.js: one route tree, locale routing in proxy.ts, translation files, per-locale metadata and hreflang.
Maintaining a converted Framer site with Git
Maintain a converted Framer site with Git: commit the conversion, review on branches, merge new conversions after a republish, update deps.
Common Framer to Next.js conversion issues and how to fix them
Framer to Next.js conversion issues and their fixes: verification, oversized sites, Deframer's notices, build errors and hydration warnings.
What website copy protection can and cannot do
Understand Deframer's registry, browser deterrents and Cloudflare request gates, including public CDN bypasses and the limits of coverage checks.
Protect a site with Deframer
Activate Deframer protection for 10 credits once, install the inline deterrent, and configure Cloudflare with DNS proof and free coverage checks.
Can you export code from Framer?
Framer has no code export. Here are the four real routes to your site's code (rebuild, HTML snapshot, converter, reverse proxy) and how to pick one.
Framer alternatives when you want to own your code
Framer alternatives ranked by how much of the site you own: Webflow, WordPress, open-source visual builders, Astro and Next.js, and converting your site.
Can you host a Framer site somewhere else?
Framer sites can't be self-hosted as files, but you can put your own proxy in front of Framer or convert the site to Next.js and host it anywhere.
Verifying Framer site ownership
Verify Framer site ownership for Deframer: add the verification meta tag in Custom Code, publish, and what to check when it isn't found.
What to do before you cancel your Framer plan
Before you cancel a Framer site plan, save your CMS, assets, URLs, redirects and custom code, convert the live site, move DNS, and cancel last.
Deploy a converted Framer site to Vercel, Netlify, Cloudflare or Fly.io
Deploy a Framer site converted to Next.js on Vercel, Netlify, Cloudflare Workers or Fly.io, set form webhooks and switch your domain safely.
How do Framer animations carry over to Next.js?
Framer animations in Next.js: transitions, appear effects, hover states, variants and page transitions run on motion/react. How to edit them.
How to compare a Framer site's PageSpeed before and after converting
Compare your Framer site's PageSpeed Insights scores with the converted Next.js version: what Deframer's speed test measures and how to read it fairly.
How do I keep my SEO when moving off Framer?
Keep your SEO when moving off Framer: identical URLs, redirects, metadata, metadataBase, robots.txt and sitemap, then DNS and Search Console.
Should I keep Framer assets on the CDN or include them locally?
Framer assets on the CDN or local? What Include assets locally changes for images, fonts and videos in Next.js, and how to switch later.
How Framer breakpoints become responsive layouts in Next.js
Framer breakpoints in Next.js: Desktop, Tablet and Phone become CSS media queries and hidden classes you can edit safely in the converted project.
Framer code components and overrides in a Next.js project
Framer code components and overrides in Next.js: where they land, how they load after hydration, and how to tighten their TypeScript types.
Framer hosting vs. self-hosting a Next.js site, compared by cost structure
Framer hosting vs. self-hosting Next.js, compared by cost structure rather than prices that change, with a worksheet you can fill in.
Migrating a Framer portfolio to Next.js
Migrate a Framer portfolio to Next.js: projects CMS, case studies, contact form and animations, with a checklist in the order you'll work.
An agency workflow for converting client Framer sites
Agency workflow for converting client Framer sites to Next.js: client permission, credit budgets, one repository per client and a clean handover.