Deframer

Framer to code

Framer to Next.js. Your site as an App Router project.

Paste your Framer site's address and get a Next.js 16 project in TypeScript: one App Router page per URL, React components with CSS modules, your CMS as JSON and your forms as API routes. Next.js is the default framework.

Your published site on *.framer.website, *.framer.app or your own domain.

Next.js is selected by default in the converter. Free to convert.

What you get

A standard Next.js project with the App Router

src/app holds routes only; the pages themselves live in src/views, so a route file stays a few lines long. CMS detail pages are prerendered for every item.

Project structure
src/
  app/            Routes: one page.tsx per URL, layout, not-found.tsx
  views/          Pages, each with its .module.css
  layouts/        Layout templates: navigation and footer
  components/     Components, in the design project's folders
  styles/         Colour tokens, text styles, @font-face rules
  cms/            CMS collections: <collection>.ts + <collection>.json
  site/           Site tables: routes, locales, forms
  lib/deframer/   The small kit that replaces Framer's runtime
  proxy.ts        The site's URL forms and redirects
public/           robots.txt, sitemap.xml, assets kept in the project
next.config.ts
src/app/**/page.tsx
One per URL, with its metadata: title, description, Open Graph and canonical URL.
generateStaticParams
CMS detail pages are prerendered for every item in the collection.
src/proxy.ts, next.config.ts
Apply the site's redirects and URL forms.
src/app/api/forms/<form>/route.ts
One route handler per native form.

Run and deploy

Unzip, install, run. Nothing from Framer.

A Next.js App Router project deploys anywhere Next.js runs: Vercel, Netlify, a container or your own Node.js server.

  1. 01

    Install

    npm install

    Installs Next.js 16, React 19, motion and the packages the site's own code uses.

  2. 02

    Develop

    npm run dev

    Runs next dev on localhost:3000. Edit a view in src/views and the page updates.

  3. 03

    Ship

    npm run build && npm start

    Builds for production and serves it with next start.

Only in Next.js

What Next.js adds

App Router metadata

Each page.tsx exports its metadata, and Next.js applies it on client navigation too.

Multi-locale sites

One route tree serves every locale ([locale]/ in src/app), each page with its title, description and language versions per locale.

The same in every framework

One project, five frameworks

Next.js, TanStack Start, Astro, React Router and Vite projects share everything below. Only the routes, the document, the server and the build differ.

Pages and components

Pages, layout templates and design components are React components in src/views, src/layouts and src/components, each with its CSS module. Components keep the designer's folders, variants and hover states.

Styles and fonts

Colour styles become CSS variables in src/styles, shared text styles become classes, and every font family gets its @font-face rules.

CMS content

Each Framer CMS collection becomes a schema (src/cms/<collection>.ts) and its records as JSON (src/cms/<collection>.json).

Forms

Native Framer forms post to the project's own API route, with a rate limit, a honeypot and field checks, and deliver submissions to webhooks you set in environment variables. A Vite site, which has no server, posts them to a form service.

Animations

Animations and interactions run on motion, the open-source animation library. No Framer runtime: a small, readable kit in src/lib/deframer replaces it.

SEO files

Every page keeps its title, description and social image. The site's redirects, robots.txt and sitemap.xml come with it, and a README lists every route.

Limits

What to expect

Plain facts before you convert.

  • The result is close to the original but not guaranteed to be identical. Check every page, in the compare view when a live preview is available or by running the project.
  • Code components and third-party embeds stay as the site's own code: they come across as source, not rewritten.
  • Very large sites may not fit a conversion. Keeping images, fonts and videos on Framer's CDN (the default) makes the download much smaller.

FAQ

Framer to Next.js, answered

Limits, files and verification are in the main FAQ, credits on the pricing page.

Can I convert a Framer site to Next.js?

Yes. Deframer converts a published Framer site into a Next.js 16 App Router project written in TypeScript, which you download as a .zip and own. Every page becomes an App Router route, components become React components with CSS modules, CMS collections become JSON and native forms become route handlers.

Which Next.js version does the project use?

Next.js 16 with the App Router, React 19 and TypeScript. The project uses no Pages Router files: src/app holds routes only.

Can I deploy the converted project to Vercel?

Yes. It is a standard Next.js project, so it deploys to Vercel, Netlify, a container or your own server: anywhere Next.js runs. Nothing in it depends on Framer.

Do my Framer CMS pages still work?

Yes. Each collection becomes a schema and a JSON file in src/cms, and its detail pages are prerendered for every item with generateStaticParams. Edit the JSON, or connect a headless CMS later.

What does it cost?

Converting is free. Downloading the code is for your own site, or one whose owner allows it: verify the site for a 1-credit download, or confirm you own it or have permission and download for 10 credits. See pricing.

Get started

Your site. Your Next.js code.

  1. Convert
  2. Download
  3. Deploy anywhere