Convert a Next.js site

Read this before you convert anything

There are two routes before a structured conversion:

Building in Next.js? Connect the app with the SDK. Your own code keeps drawing the page, and only the fields you expose become editable. Already have a website? Give us the zip or address. Snabbsite tries an editable visual capture and falls back to a structured rebuild when needed.

If this Next.js app is yours and you keep deploying it, stop here and use the SDK lane instead of this page. Wrap your sections in defineBlock, push, and your client edits the fields you expose in Snabbsite while your own components keep drawing the website. This keeps the current design because it is still the same app. It is a connected delivery route, not a code import. The five steps are on the quickstart.

The conversion below is the third lane: it rebuilds the site on Snabbsite blocks. It keeps your words, images and facts, and it replaces your layout, fonts and colours with ours. Pick it only when you want a new design.

What a conversion moves

Site Kit converts the rendered website's content model. It does not transplant React components, Tailwind classes, server actions, route handlers, or custom application state.

Workflow

1. Inventory public routes under app/ or pages/.
2. Open the rendered site and record the real navigation and content.
3. Create one Snabbsite page per substantial public page.
4. Fold thin pages into sections when that makes the result simpler.
5. Map reusable components to built-in section types.
6. Copy only used public images into the package assets/ directory.
7. Replace custom actions with typed page, anchor, email, phone, booking, or lead targets.
8. Validate, pack, import, and review before publishing.

Route mapping

app/page.tsx              -> slug ""
app/services/page.tsx     -> slug "services"
app/about/page.tsx        -> slug "about"
app/contact/page.tsx      -> slug "contact"
app/api/**                -> not imported
app/dashboard/**          -> not imported

Dynamic routes need a product decision. A small set of real articles can become post pages. Authenticated dashboards, databases, or application routes do not belong in a Snabbsite site package.

Component mapping

<Hero title="Accounting without the admin" image="/team.jpg" />
<ServiceGrid services={services} />
<Testimonials items={reviews} />

maps to hero, services, and testimonials. Component props become structured content. JSX and CSS do not enter the package.

Record unsupported calculators, custom commerce, complex embeds, and app-only flows instead of hiding them inside raw HTML.