FRAMER TO ASTRO OR NEXT.JS
Framer to Astro or Next.js, when the site needs to grow up
Keep the design, lose the limits. We rebuild your Framer site in code on Astro or Next.js, move the CMS and every asset, and redirect each URL that ranks.
FramerAstro or Next.jsFRAMER → ASTRO · NEXT.JS
TYPICAL TIMELINE
2 to 6 weeks, set by the page count
COST
From $2,500; ten pages run $6,500 to $14,500
SEO RISK
Low: Framer paths can be kept exactly
MOVES CLEANLY
CMS collections, copy, images and SEO fields
MUST BE REBUILT
Canvas layouts, effects, code components and forms
IN SHORT
A Framer to Astro or Next.js migration turns a design-tool site into a codebase you own. Framer has no full code export, so pages are rebuilt as components that match the design closely, effects included where they earn their place. CMS collections export as CSV and move into Sanity or Markdown, images are downloaded, and every URL keeps its path or gets a one-to-one 301 before launch.
WHY TEAMS MOVE
Why teams leave Framer for Astro or Next.js
01
Content that outgrew the CMS
Docs, large blogs and directories need references, versions and roles that a design-tool CMS doesn’t handle well.
02
Every edit goes through a designer
Marketing waits for whoever knows the canvas. A block-based CMS lets editors publish safely on their own.
03
Speed that’s hard to control
Heavy effects and runtime scripts weigh on mobile Core Web Vitals, with little you can tune.
04
Product features on the marketing site
Logins, pricing logic, search and integrations want real code, not embeds.
OLD VS NEW
Framer vs Astro or Next.js, for this move
Framer
Astro or Next.js
Editing
On the Framer canvas, by whoever knows it
A headless CMS with approved blocks and live preview
CMS
Collections built for design-led sites
Typed schemas with references, versions and roles
Speed
Framer’s runtime on every page
Static or server-rendered HTML, JavaScript only where needed
Custom logic
Code components and embeds
Any API, auth or data, in your own code
Change control
Publish from the canvas
Pull requests, preview links and one-click rollback
Redirects
Set in site settings
Versioned in the repo, served as real 301s
WHAT MOVES, WHAT DOESN’T
What comes across from Framer
Framer gives you your content, not your code. Plan for the pages to be rebuilt to match the design, and for the CMS to move across with care.
CMS collections
Exported as CSV, mapped to CMS schemas, then checked item by item.
Images & files
Downloaded from Framer’s CDN and re-uploaded, with alt text kept.
SEO settings
Page titles and descriptions carry over; schema and Open Graph are rebuilt per template.
Pages & layouts
Canvas layouts are rebuilt as components, matched to the design at each breakpoint.
Effects & animations
Scroll and hover effects rebuilt in CSS or a small motion library, kept where they help.
Code components
React code components usually port across with small changes.
Forms & embeds
Framer forms and embeds move to a form service, an API route or a native integration.
CONTENT MODEL
How Framer content maps to Astro or Next.js
FRAMER · BEFORE
CMS collections
Collections with text, image and link fields.
ASTRO / NEXT.JS · AFTER
Typed CMS schemas
A schema per collection, with validation and real references.
FRAMER · BEFORE
Collection pages
A detail page per collection, laid out on the canvas.
ASTRO / NEXT.JS · AFTER
Page templates
A component template per type, at the same URL pattern.
FRAMER · BEFORE
Pages
Pages designed frame by frame on the canvas.
ASTRO / NEXT.JS · AFTER
Pages from blocks
Pages assembled from approved section blocks that editors can reorder.
FRAMER · BEFORE
Components & styles
Framer components, colour and text styles.
ASTRO / NEXT.JS · AFTER
Design system
Tokens and components in code, shared by every page.
PROCESS AND TIMELINE
How we move a Framer site to Astro or Next.js
Our usual order for a marketing site with a blog. Sites with many templates or a members area take longer.
1
WEEK 1Audit & URL inventory
Crawl every URL, export the content, and pull rankings and backlinks from Search Console. This list decides what must not move.
2
WEEK 1Content model & redirect map
Turn content types and fields into CMS schemas, and give every URL a fate: keep, 301 or retire.
3
WEEKS 2–3Design system & templates
Tokens and section components in code, then the page templates, reviewed on preview links.
4
WEEKS 3–4Content & assets
Import the CMS export, move images, then check every item and page against the Framer original.
5
WEEKS 4–5SEO parity & QA
Titles, canonicals, schema and sitemap per template; redirects, forms and links tested on the preview.
6
LAUNCH + 4 WEEKSLaunch & watch
Switch DNS early in the week, submit the sitemap, then watch 404s, indexing and rankings daily.
SEO SAFETY
The pre-launch checklist for Framer
Rankings are lost three ways: broken URLs, missing on-page signals, crawl problems. These four stages close all three.
STAGE 1
Before the build
- URL inventory, every live URL listed by template
- Redirect map, one 301 per changed URL
- Collection slugs kept as they are
- Trailing slash rules decided
STAGE 2
During the build
- Titles, descriptions and canonicals per template
- Structured data rebuilt per template
- Internal links rewritten to final URLs
- Image alt text carried over
STAGE 3
Before launch
- Real 301s at the edge, tested with a crawler
- Sitemap and robots.txt checked on the preview
STAGE 4
After launch
- Submit the sitemap and request indexing
- Watch 404s, indexing and rankings daily
FREE MIGRATION PLANNER
Plan your Framer redirects
Enter your site to list every URL, see which keep their path, and get the 301 redirect map.
Run the planner →FREE SEO & AEO CHECKER
Check your new site for AI answers
See if ChatGPT, Claude, Perplexity and Google AI Overviews can find, read and cite your pages.
Run the checker →FAQ
What Framer teams worry about
Not sure which move you need?
We’ll look at your site on a 30-minute call.
Book a callWill the new site still look like our Framer site?
Yes, unless you want a refresh. We rebuild from your Framer pages and design files, compare each template side by side on desktop and mobile, and keep the effects that matter.
Astro or Next.js: which should we choose?
Astro for content-led sites: marketing pages, blogs and docs. It ships almost no JavaScript by default. Next.js when the site also needs logins, a customer portal, dashboards or pages built from live data. We recommend one after the audit, and the content model works with either. See Astro vs Next.js.
Will we lose our Google rankings?
Not if the redirects and on-page signals are done right. Most URLs keep their exact path; anything that changes gets a one-to-one 301, and we watch 404s, indexing and rankings daily for four weeks against the pre-launch baseline.
Can our designers keep shipping new pages?
Yes, in a different way. Designers design in Figma, and editors build pages in the CMS from approved blocks. A new block type is a small development job, usually a day or two, or part of a subscription.
What does the migration cost?
From $2,500 for a single page; ten pages run $6,500 to $14,500, at a fixed price agreed after the URL inventory. Posts and CMS items moved by script don't count as pages; templates do. See the website cost calculator.
You've reached the end, so now…
Tell us what you’re building.
Send us your store. Within one business day you get a short Loom from a senior: the three things we'd fix first, what it would cost, and whether we're the right team for it.
- No pitch deck, no discovery-call theatre
- You keep the audit whether or not you hire us
- Fixed-scope quotes, no hourly surprises
Prefer to talk? Book 20 minutes with Haniel or call +1 855-764-4977