Export: Next.js

The Next.js export packages a page as a complete, runnable Next.js project — source you own, build, and extend as a real codebase. This page covers what the generated project contains, how your theme is resolved into it, and how to run it.

What you get

Choosing Export → Next.js project (.zip) from the designer's top bar builds a zipped project named after your page. Unzip it and you have a standard Next.js App Router project:

your-app/
  package.json        # next 15, react 19, @mui/material 7, emotion
  tsconfig.json
  next.config.js
  next-env.d.ts
  .gitignore
  README.md
  app/
    theme.ts          # your resolved theme as a MUI createTheme() call
    providers.tsx     # 'use client' ThemeProvider + CssBaseline
    layout.tsx        # root layout with page title + description
    page.tsx          # your sections rendered as MUI JSX

It is a TypeScript project built around Material UI (MUI) and Emotion, using Next.js 15 with React 19. Everything is real source — nothing is minified or obfuscated — so you can open page.tsx and keep building.

Theme tokens, resolved

Your design system does not get flattened into hard-coded styles — it is written into app/theme.ts as a proper MUI createTheme() call so the exported app has a real, editable theme:

• Palette — primary, secondary, success, warning, error, plus background and text colors, all pulled from your project theme.
• Typography — your body font as the base fontFamily, and heading levels h1–h5 configured with your heading font and type scale.

Spacing, radius, and shadows are left on MUI's sensible defaults, so any MUI component you add later inherits a familiar baseline.

Each section is mounted in a Box using the same outer and inner styles the editor and HTML export use, so the layout carries over. One deliberate detail: sections use plain CSS style (raw pixel values) rather than MUI's sx, because sx multiplies bare spacing numbers by MUI's 8px unit — which would oversize every gap.

Running it

The project is standard, so the workflow is the standard Next.js one. From the unzipped folder:

npm install
npm run dev

Then open the dev server URL it prints (usually http://localhost:3000). To produce a production build:

npm run build
npm start

NOTE

The generated README uses npm. That is the exported project's own toolchain — it is independent of FlowRunner, so use whatever package manager you prefer (npm, pnpm, yarn) inside it. FlowRunner's own repo uses Yarn, but that rule does not apply to the app you exported.

Scope

TIP

The export currently emits a single page — the whole document becomes app/page.tsx. Multi-page routing across several pages is planned but not yet generated, so if your project has multiple pages, export them individually for now.

Because you get real MUI source, this export is the right choice when you want to hand a page to developers, add server-side logic, integrate your own APIs, or grow a page into a full application.

See also

• Export: HTML
• Export: React Native
• Theme & design tokens
• Publish & share