Skip to main content
FXFramExporter
Export a site
Migration path

Framer to Next.js

A React framework with file-based routing and static export, and the usual destination when a marketing site needs to grow into an application.

VerdictDirect path
Read this before you quote the work
This is the cleanest destination of the set. A static export drops into the public directory and works immediately; converting pages into components afterwards is optional and incremental rather than all-or-nothing.

The order that works

  1. 1Create the app: npx create-next-app@latest my-site
  2. 2Copy the export's assets, images, and fonts into public/.
  3. 3Move the export's CSS into app/globals.css, or import it per-route.
  4. 4Convert each exported page's markup into the matching app/<route>/page.tsx, closing void tags and renaming class to className.
  5. 5Replace repeated markup — nav, footer, cards — with components as you go, rather than in one pass.
  6. 6Run next build to confirm nothing depends on runtime JavaScript that did not come across.

What you keep

  • Markup, CSS, animations, and assets, essentially intact
  • URL structure, if you mirror the exported filenames as routes
  • The SEO head tags, once moved into the metadata export

What you rebuild

  • Nothing structural — the losses are Framer runtime effects that were already dropped at export time
The mistake to avoid
Pasting raw HTML into JSX without converting attributes. React silently ignores class and for, so the page renders unstyled and no one can see why. Convert to className and htmlFor first.

Questions

›Can I import a Framer site directly into Next.js?

This is the cleanest destination of the set. A static export drops into the public directory and works immediately; converting pages into components afterwards is optional and incremental rather than all-or-nothing.

›What transfers from Framer to Next.js?

Markup, CSS, animations, and assets, essentially intact. URL structure, if you mirror the exported filenames as routes. The SEO head tags, once moved into the metadata export.

›What has to be rebuilt?

Nothing structural — the losses are Framer runtime effects that were already dropped at export time.

›What is the most common mistake on this migration?

Pasting raw HTML into JSX without converting attributes. React silently ignores class and for, so the page renders unstyled and no one can see why. Convert to className and htmlFor first.