How to export a Framer site to Next.js

To export a Framer site to Next.js, you either rebuild it by hand in a Next.js App Router project or use a converter that reads the published site and writes the code for you. Deframer is one such converter: it rebuilds every page, component and style as TypeScript for free; when you download, you show the site is yours and get a standard Next.js 16 project as a .zip. From there you run npm install and npm run dev, review the result, and deploy it wherever Next.js runs.

Your two options

Rebuild by hand

A manual rebuild means opening the Framer project next to an empty Next.js app and recreating each page: layout, breakpoints, text styles, color styles, CMS content, forms and animations. It gives you full control over every line, and for a small one-page site it can be reasonable. For anything larger, the work adds up quickly, and the hardest parts to match are the details you notice only side by side: spring timings, hover states, per-breakpoint text sizes and hidden layers.

Use a converter

A converter starts from what the site already publishes. Deframer reads only the files your published site serves, the same ones a browser loads, so it needs no access to the Framer editor and changes nothing in your Framer account. The output is a project you own and edit like any other Next.js codebase.

Deframer is an independent tool and is not affiliated with, endorsed or sponsored by Framer.

The Deframer flow, step by step

1. Create an account

Sign in at Deframer with a free account. Converting is free; downloading a converted project uses one credit, the first time, and you buy credits in packs on the pricing page. Credits never expire, and a conversion that fails or is interrupted costs nothing.

2. Paste your site's URL

Use the address visitors open, not the editor link. Sites on *.framer.website, *.framer.app or a custom domain all work. Deframer checks that the page is a published Framer site; if it isn't, you see a "Not a published Framer site" message.

3. Convert

Click Convert and follow the live progress: queued, fetching, modules, converting, packaging, done. A conversion can run for up to 10 minutes. If the service is busy, your conversion waits in line and shows its place.

Before you start, decide on Include assets locally. Off (the default), images, fonts and videos keep loading from Framer's CDN, which makes the download smaller and the conversion faster. On, every Framer-hosted asset is downloaded into public/ so the site no longer depends on Framer at all, at the cost of a longer conversion and a bigger .zip.

4. Review the result

The result page lists notices about the conversion, such as files that couldn't be downloaded, components that render only in the browser, or a redirect that wasn't carried over. Read them before you download; each one tells you where to look.

When live previews are on, the project is then built as a live preview, and the compare view shows the original and the converted site side by side, either as a swipe or a 50/50 split. You can switch between three widths (1440, 768 and 390 pixels), and scrolling and navigation stay in sync. A live preview lasts 10 minutes after it's ready, with a countdown, so use it for a focused first review. When speed tests are on, the job page also runs a PageSpeed Insights lab test on both sites, mobile and desktop. Previews and speed tests may be paused, and a preview build can fail; you can always run the project locally once you've downloaded it.

5. Verify that the site is yours

Converting works without it, but downloading the code needs proof that the site is yours. When you choose to download, Deframer shows your personal verification code as a one-line meta tag:

<meta name="deframer-verification" content="dfv_…">

In Framer, open Site Settings, then Custom Code, and paste the tag at the end of the <head> section. Publish the site, then click Check again. The download unlocks once the code is found on the live page; until then, no credit is used. The code is personal to your Deframer account and works for all your sites. The full walkthrough, including troubleshooting, is in verifying Framer site ownership.

6. Download

The first download uses one credit, after the ownership check. The download stays available for 7 days after the conversion finishes. Reopening and downloading the same project again are free, and so is comparing it when a live preview is available.

7. Run it locally

Next.js 16 needs Node.js 20.9 or later. Unzip the project and run:

npm install
npm run dev

Open http://localhost:3000. The project's README.md lists the routes (URL to route file), the folder tree for your site, and a "Where to edit" table. For a tour of every folder, see what you get in a converted Next.js project.

8. Deploy

The project is a standard Next.js app, so it deploys anywhere Next.js runs: Vercel, Netlify, a container or your own server. Run a production build first to catch problems early:

npm run build
npm start

Host-by-host instructions are in deploying a converted Framer site.

What to check after converting

Work through this list before you point your domain at the new site.

1. Every route renders. Open each URL in the README's routes table, including CMS detail pages and the 404 page.
2. Three widths look right. Resize to roughly 1440, 768 and 390 pixels. Breakpoints are kept as separate layouts, so check each one.
3. Animations and hover states play. Transitions, appear effects and page transitions are carried over and played by the motion package and the project's kit.
4. Forms deliver. Copy .env.example to .env.local and set FORMS_WEBHOOK_URL (or a per-form variable) so submissions reach you. Without a webhook, submissions are only logged by the server.
5. Metadata is correct. Each src/app/**/page.tsx has its own metadata. The root layout sets metadataBase to the site's published URL; change it to your new production domain if the domain moves.
6. robots.txt and sitemap.xml match the domain. Both are copied into public/ as the site publishes them, so update the domain inside them if it changes.
7. Notices are resolved. Revisit each notice from the result page. For the common ones, see common Framer to Next.js conversion issues.
8. The build passes. If the site has code components written in Framer, next.config.ts keeps typescript: { ignoreBuildErrors: true } with a comment explaining why; npx tsc --noEmit still reports type errors so you can fix them gradually.

Once you're happy, you can remove the verification tag from Framer. It's only needed when you download a new project, and the converter already strips it from the project, so it never ships in your code.

When a conversion doesn't fit

Limits apply: a conversion runs for up to 10 minutes and a project can be up to 1 GB. Very large sites may not fit, especially with local assets on. Retry with "Include assets locally" turned off so assets stay on Framer's CDN. Converting is free, so a failed conversion costs nothing.