By Mehdi HassanHow do you move a Next.js marketing site to Framer?
You move a Next.js marketing site to Framer by rebuilding the marketing pages in Framer, importing the content into Framer CMS, and changing how your domain routes traffic so the app keeps running on Next.js. Nothing converts automatically, so the work is a planned rebuild plus a routing change.
Most teams do this for one reason: marketing waits on engineers for every page. Framer gives designers and marketers direct control, while engineers keep the product. If you're still deciding whether to move at all, start with our guide to moving from code to a visual builder, which covers when to stay in code.
The rest of this guide assumes the decision is made and focuses on the part most guides skip: keeping /app, or app.example.com, on Next.js while the marketing root moves.
What stays on Next.js and what moves to Framer?
Everything a logged-out visitor reads moves to Framer, and everything that needs a user, a database or an API stays on Next.js. Drawing that line before you design anything saves rework later.
Route type | Examples | Where it goes |
|---|---|---|
Marketing pages | Home, pricing, features, about | Framer |
Content | Blog, case studies, changelog | Framer CMS |
Landing pages | Campaigns, ads, events | Framer |
Auth | Login, sign-up, password reset | Next.js |
Product | Dashboard, settings, billing | Next.js |
API routes and webhooks | /api paths | Next.js |
Docs | Developer docs, API reference | Usually stays in code or a docs tool |
Watch for marketing pages that quietly depend on code, such as live pricing pulled from your billing system or a sign-up form that creates an account. Those need a decision: simplify them for Framer, embed a small code component, or keep them in the app.
Subdomain or proxy: how should Framer and Next.js share a domain?
Put Framer on the root domain and the app on a subdomain unless you have a strong reason not to. It's the setup with the fewest moving parts, and it's what most SaaS companies use.
- Option A: app subdomain. example.com points to Framer, app.example.com points to your Next.js host. Login links change, and that's most of the work.
- Option B: Next.js in front. Next.js stays on the root and uses fallback rewrites to send any path it doesn't handle to the Framer site. /app keeps working at the same URL.
- Option C: edge proxy. A worker or proxy at your DNS provider sends /app and /api to Next.js and everything else to Framer.
Options B and C keep existing app links working, which matters if customers have bookmarked example.com/app or you've shared deep links. The cost is a proxy you have to maintain, plus extra checks on caching and canonical URLs. Our guide to splitting your marketing site from your app compares the SEO side of each option.
How a Next.js fallback rewrite works
Next.js rewrites can be grouped so that some run only after Next.js has checked its own pages and routes. A rewrite in that fallback group with a catch-all source and your Framer site's published address as the destination means /app, /login and /api keep resolving in Next.js, and every other path is fetched from Framer.
Test three things before you rely on it: that Framer pages return the right canonical URL on your domain, that assets load through the proxy, and that your host's caching doesn't serve stale marketing pages after you publish in Framer. Check Framer's current documentation on custom domains and proxies, since support and plan requirements change.
What are the steps in a NextJS to Framer migration?
A Next.js to Framer migration runs in seven steps. The build itself is often the quickest part; the audit, URL mapping and checks are where quality is decided.
Benchmark and crawl
Crawl the current site, export every URL, and save rankings, top pages and conversion data from analytics and Search Console.
Audit the content
Mark each page keep, merge, rewrite, redirect or delete. There's no point rebuilding pages with no traffic and no purpose.
Design in Framer
Rebuild templates as Framer components with clear properties, so marketers can make new pages without breaking layouts.
Set up Framer CMS
Create collections for posts, case studies and other repeatable content. Match slugs and path prefixes to your old URLs.
Import content
Export MDX or headless CMS entries to CSV, clean the HTML, re-host images and import into Framer CMS.
Recreate SEO settings
Enter titles, descriptions, social images and canonicals in Framer's page and CMS settings. Add schema with custom code where needed.
Switch routing and launch
Change DNS or deploy the proxy, add 301 redirects for changed paths, submit the sitemap and test forms end to end.
How do you move blog and CMS content into Framer?
Move content into Framer CMS by exporting it to CSV, transforming the fields, and importing collection by collection. Framer's CSV import and its plugins handle most marketing content, but the transform step is where problems hide.
- MDX posts need custom components, such as callouts or embeds, converted to plain HTML or rich-text equivalents first.
- Images must be re-hosted or uploaded to Framer. Don't leave them on your old host if that host will be shut down.
- References like authors and categories need their own collections. Framer doesn't support multi-reference fields, so many-to-many tags need a workaround or a simpler model.
- Slugs should match the old URLs exactly so you need fewer redirects.
Framer's CMS has limits on items and collections that third-party sources describe differently, so check the current plan page against your post count before committing. If you have thousands of programmatic pages, staying in code may be the better call.
How do you keep SEO when moving from Next.js to Framer?
You keep SEO by holding URLs, metadata and content steady through the move, and redirecting only what you've deliberately changed. Framer publishes static, server-rendered pages, so crawlability is rarely the problem.
If your old marketing site was a client-rendered React app, the move may actually help, because crawlers that don't run JavaScript will see your copy for the first time. We explain why in server-side rendering for AI crawlers and fixing a marketing site built like an app.
After launch, check Search Console daily for the first two weeks. Look for spikes in 404s, pages marked as duplicates because of canonical issues, and any drop in indexed pages. Most migration problems show up there before they show up in traffic.
Is a Next.js to Framer migration right for your team?
It's right if marketing will own the site and the site has no app logic. It's wrong if engineers enjoy shipping the site, you rely on programmatic pages, or your blocker is simply the lack of a CMS.
Compare the alternatives before you commit. Webflow suits larger, relational content, and our Next.js to Webflow migration guide shows that path. Some teams later move the other way when they outgrow Framer, which we cover in Framer to Next.js migration.
