Migrating from Framer to Next.js, Vercel and Claude Code

TL;DR

• Framer does not support HTML export, so a move to Next.js is a rebuild from the live site and your Framer project, carried out by Claude Code
• CMS collections come out as CSV through the CMS Export plugin in Framer's marketplace
• Framer code components are already React, though they import from Framer's own library, so they need those dependencies swapped out before they run in Next.js
• Framer Motion is now an independent library called Motion, so your animation ideas can come across even though Framer's on-canvas animations cannot
• Framer redirects live in Site Settings, Hosting, Redirects, and you need to copy them before the domain moves
• Keep the domain and URLs identical at launch, and match your titles and descriptions before you improve them
• The new site needs a content layer from day one, because Framer's CMS editor stays behind

Why Framer sites move

Framer makes beautiful sites quickly. Designers love it for good reason.

The friction shows up later. Framer's help centre is direct about it: Framer does not support HTML export, and your site runs on Framer's hosting. That is a fair trade while the design team owns the site. It gets harder once marketing wants to ship landing pages weekly, and once Claude Code can build a page from a brief in an afternoon.

Framer also sits close to Next.js. Both are React underneath, Framer's code components are React components, and the animation library that grew out of Framer is now an independent project anyone can install. A Framer site rebuilt in Next.js can look identical, because the same ideas carry across.

This guide covers what is specific to Framer. For the general process, start with our guide to migrating any website to Next.js, Vercel and Claude Code. If you are weighing Framer against Webflow as the place you left, our Webflow migration guide covers the other common route.

Step one: capture everything before you start

With no export, your source material comes from three places, and you want all of it saved before anyone touches the domain.

The live site. Every URL, every page's title and description, and every image. Open yourdomain.com/sitemap.xml if your site serves one, then crawl the site to catch anything the sitemap misses, and add the Pages report from Google Search Console.

The Framer project. Your colour styles, text styles, breakpoints and component variants hold the design system. Screenshot each page at desktop, tablet and phone widths, and note the hover states and transitions.

The CMS. Framer's marketplace has a CMS Export plugin that exports any collection as a CSV file. Run it for every collection, then check how formatted text and image fields came through before you build anything on them.

Every URL on the list get a decision: same page at the same address, or a redirect.

Step two: rebuild the design system first

Claude Code works best when it builds from tokens, not from pixels. Start there.

Here are screenshots of our Framer colour styles and text styles, plus every page at three widths. Create one theme file with the colours, type scale, spacing and breakpoints, and build a component library from the repeated sections before any page.

Framer projects collect variants. A card component with five slightly different versions, three button styles that should be one. Ask Claude Code to list every repeated section it can see across the screenshots and flag the near-duplicates, then keep one version of each. You end up with a smaller, tidier design system than the one you left.

Step three: bring your code components across

If your team wrote code components in Framer, you already have React. Framer's developer documentation describes code components as React components written in Framer's built-in editor, which render on the canvas, in the preview and on the published site.

They will not run in Next.js as they are. Code components import from the framer library, which supplies property controls and other helpers that only exist inside Framer. Give Claude Code each component's source and ask it to replace those imports with plain React props.

Here is the source of our Framer code component PricingToggle. Rewrite it as a standard React component for Next.js. Replace anything imported from framer with typed props, keep the behaviour identical and list what you changed.

Step four: decide which animations to keep

Framer's on-canvas animations stay with Framer. The library behind much of that motion work does not. Framer Motion became an independent project called Motion, a general animation library for React and other JavaScript environments, so Claude Code can rebuild entrance effects, scroll animations and hover states with it.

Be choosy. Animations that delay your headline or your main copy cost you speed and give a crawler nothing. Keep the ones that help people understand the page, rebuild them lightly, and drop the rest. Anything that fades in your main content should render that content in the HTML first and animate it second.

Step five: copy your redirects

Framer keeps redirects in Site Settings, then Hosting, then Redirects. Those rules stop working once Framer no longer serves your domain, so copy every one before you switch DNS.

Move them into next.config.js. With permanent: true, Next.js sends a 308 status code, and Google treats 301 and 308 both as permanent redirects. Then add rules for any URL the rebuild changes. Point every old URL at its final destination in one hop.

The best redirect is the one you never need. Framer CMS pages usually follow a collection path and an item slug, such as /blog/post-name. Keep that structure in Next.js and those URLs move with no redirect at all. If the domain and every path stay the same, Google treats the move as a change of hosting, which is the least disruptive kind.

Step six: match your SEO, then improve it

Framer lets you set a title and description for each page and for CMS pages through collection fields. Carry them across exactly.

• Static pages get a metadata export with their existing title and description
• CMS pages get generateMetadata, reading the fields from each item
• Social images come across per page, or get generated per post
• Every page gets a canonical on your production domain
• app/sitemap.ts and app/robots.ts replace what Framer generated for you

Launch with the same metadata so any movement comes from the move, then rewrite titles a month later. Our guide to SEO for Vercel and Next.js sites covers the files line by line.

Then check the HTML. Use curl or view source on a few pages and confirm the headline and main copy appear in the raw response. Vercel and MERJ's research on AI crawlers found that OpenAI's crawlers, ClaudeBot and PerplexityBot do not run JavaScript, so content that only appears after a script runs is content those crawlers never see. Our guide to building an agent-friendly website covers the rest of the markup side.

Step seven: give the site a content layer

Framer gave your team a CMS editor alongside the design canvas. The Next.js site has neither, and you need to replace the editor before the first post is due.

Contengi is the AI-native CMS we built for sites like this. Claude Code adds one signed endpoint to your Next.js site from a single prompt, and posts arrive with their title, slug, SEO title, meta description, body, FAQ and featured image, stored in your own database and keyed on the URL. Edits republish to the same address. The agents writing those posts work from your brand knowledge base and hard rules, and the Claude you used for the rebuild can open and edit any post through the Contengi connector.

Page copy stays in code. Changing a headline on the homepage is a request to Claude Code, the same tool that built the page.

What you gain

You gain the code. Framer hosted your site and kept the build to itself. Next.js on Vercel gives you a repository you own, deploys on every push, and a codebase Claude Code can read end to end.

You gain speed of shipping. A landing page stops being a design ticket and becomes a brief.

You keep the look. Because Framer and Next.js share React and the same animation heritage, a careful rebuild can match the old site closely, and your visitors may never notice the change.

You still have to earn the traffic. The move protects your rankings if you handle the URLs and metadata well, and it removes platform limits. What you publish afterwards decides the growth.

Launch checklist

1. Keep your Framer site live and its plan active until the new site has been stable for a few weeks
2. Confirm every page from your inventory exists or redirects on a preview deployment
3. Check that every Framer redirect works in Next.js
4. Confirm the headline and main copy appear in the raw HTML of key pages
5. Switch DNS, submit the new sitemap in Search Console and watch the Pages report daily for the first two weeks

Frequently asked questions

Can I export my Framer site to code?

No. Framer's help centre says it does not support HTML export. You rebuild the site in Next.js with Claude Code, using the live site and your Framer project as the reference.

How do I get my Framer CMS content out?

Use the CMS Export plugin from Framer's marketplace, which exports any collection as a CSV file. Then let Claude Code convert the CSV into content files or load it into your new content layer.

Can I reuse Framer code components in Next.js?

Yes, with changes. They are React components, though they import helpers from the framer library. Replace those imports with standard props and they run in Next.js.

Will my Framer animations survive the move?

The on-canvas animations stay with Framer. The effects themselves can be rebuilt with Motion, the independent library that used to be Framer Motion.

What do I lose SEO-wise when I leave Framer?

You can keep the impact small if you keep the same domain and URLs, copy the Framer redirects and match your titles and descriptions. Expect some fluctuation while Google recrawls.