Examples
This is what an eject actually looks like
Real, unedited output from the extraction pipeline — the exact code the Next.js components build writes into your zip. No mockups.
unzipped project
your-site-nextjs/ ├─ components/ │ ├─ shared/ ← deduped across pages │ │ ├─ SiteHeader.jsx │ │ ├─ SiteFooter.jsx │ │ └─ Card…Section.jsx │ ├─ home/Hero.jsx ← one file per section │ ├─ about/Hero.jsx │ └─ useInternalNavigation.js ├─ pages/ │ ├─ _app.js · 404.js │ ├─ index.js · about.js · pricing.js │ └─ blog/post-one.js ← nested routes preserved ├─ public/robots.txt · images · fonts ├─ styles/globals.css ├─ next.config.mjs · package.json └─ EXTRACTION_REPORT.md ← what degraded, if anything
Repeated nav/footer/cards detected across pages and hoisted into shared/ — written once, imported everywhere.
components/shared/SiteHeader.jsx
export default function SiteHeader() {
return (
<>
<header data-framer-name="Nav" className="framer-usoax48 nav">
<a href="/" id="n-31" className="framer-wwbwpsk link">
Home
</a>
<a href="/about" className="framer-yrhjpmv link">
About
</a>
<a href="/pricing" className="framer-10lay8ev link">
Pricing
</a>
</header>
</>
);
}Real JSX, not an HTML blob — no dangerouslySetInnerHTML anywhere in the export.
pages/index.js
import Head from 'next/head';
import useInternalNavigation from '../components/useInternalNavigation.js';
import SiteHeader from '../components/shared/SiteHeader.jsx';
import Hero from '../components/home/Hero.jsx';
import SiteFooter from '../components/shared/SiteFooter.jsx';
export default function HomePage() {
useInternalNavigation();
return (
<>
<Head>
<title>{pageTitle}</title>
<meta name="description" content={pageDescription} />
</Head>
<SiteHeader />
<Hero />
<SiteFooter />
</>
);
}Per-page metadata kept, sections composed as imports. Deploy as-is.
The most convincing example is your own site.