Importing a Next.js Project into Lovable: What Works, What Breaks

The Honest Truth: There's No "Click Import"

Lovable does not currently support a direct Next.js import. Next.js's App Router conventions, server components, and Vercel-specific deployment assumptions don't map onto the TanStack Start runtime. What you can do is structured migration — port your code into a fresh Lovable project, route by route.

Step 1 — Scope the Migration

Audit your Next.js app: how many pages, how many API routes, how much server-component-only code, which third-party packages assume Node.js, and which depend on Vercel's Edge Runtime. Apps under ~50 routes with mostly client components migrate in days. App Router apps with heavy server-component nesting take weeks.

Step 2 — Create a Fresh Lovable Project

Start a new Lovable project (TanStack Start template). Don't try to drop your old next.config.js into it. Instead, copy components, hooks, and utilities incrementally as you wire up routes. The agent can help refactor "use client" components into standard React components.

Step 3 — Convert Routes

pages/index.tsx → src/routes/index.tsx. pages/blog/[slug].tsx → src/routes/blog.$slug.tsx. app/dashboard/page.tsx → src/routes/dashboard.tsx with createFileRoute. Replace next/link with @tanstack/react-router's Link and next/navigation hooks with useNavigate, useLocation.

Step 4 — Convert API Routes and Server Actions

Next.js API routes become TanStack Start server routes under src/routes/api/. Server actions become createServerFn definitions in *.functions.ts files. Auth-protected routes get the requireSupabaseAuth middleware. Database access moves from your existing ORM to Lovable Cloud (Postgres + Supabase client).

Step 5 — Migrate next/image and next/font

Replace next/image with standard <img> tags + explicit width/height + loading="lazy". For fonts, use a <link> in your root layout or @fontsource packages. Lovable's build pipeline handles image optimization differently from Next.js — large hero images should be pre-resized.

What You Can't Bring Over

Vercel-specific features (ISR with on-demand revalidation, Edge Config, Vercel KV), Next.js Middleware as a single edge function, and any Node-only packages that don't support Cloudflare Workers. Plan replacements before you start: Lovable Cloud for KV-style storage, server functions for revalidation, and pure-JS alternatives for Node-only libs.

When Migration Pays Off

If you're paying for Vercel Pro purely to host an MVP, moving to Lovable usually cuts cost and adds AI-assisted iteration. If your app depends on Next.js-specific features for revenue (ISR-driven SEO at scale, complex middleware chains), the migration cost may exceed the upside. Run the numbers before committing.