Skip to main content

​
The Gateway Drug

Convert your Lovable app to Next.js

A smart CLI tool that automatically converts your React Router applications to Next.js 14+ using the new App Router. Escape Lovable’s ecosystem and own your code.

​
What You’re Buying

Not a service. A tool. You pay once, you own the conversion. Convert FROM Lovable TO Next.js. No monthly fees, no vendor lock-in.

​
What Exactly Gets Converted

React Router → Next.js

  • useNavigate() → useRouter()
  • <Link to=""> → <Link href="">
  • useLocation() → usePathname() + useSearchParams()
  • useParams() → Next.js useParams()

React Hooks & State

  • useState, useEffect, custom hooks preserved
  • Context providers maintained
  • Automatic ‘use client’ directive detection

Styling Systems

  • Tailwind CSS classes preserved
  • CSS Modules support
  • Styled-components detection

Components

  • Functional components converted
  • Props interfaces maintained
  • TypeScript types preserved

​
What Breaks

These require manual intervention after conversion
Lovable injects proprietary components that don’t exist outside their platform:
  • Custom UI libraries with Lovable-specific props
  • Pre-built authentication components
  • Managed form components
Fix: Replace with standard React components or shadcn/ui
Lovable apps often have hardcoded references to their managed APIs:
  • /api/lovable/* endpoints
  • Internal service URLs
  • Managed auth endpoints
Fix: Update to your own API endpoints or Supabase
Lovable-specific env vars won’t work:
  • VITE_LOVABLE_* variables
  • Managed database connection strings
  • Platform-specific config
Fix: Create your own .env.local with correct values

​
The 1-Credit Escape

1

Install the CLI

npm install -g next-lovable
2

Test for free

next-lovable convert MyComponent.tsx --dry-run --show-diff
Single file conversions are free. No account needed.
3

Convert your files

next-lovable convert src/components/*.tsx
Each file consumes 1 conversion credit.
4

Full project migration

next-lovable migrate ./my-app ./my-next-app
Full migrations require authentication and 1 migration credit.

​
When to Use CLI vs Cloud Migration

Use when:
  • You just want the code
  • You’re fine staying on Lovable’s backend for now
  • You have your own database solution
  • You want to test the conversion first
What you get:
  • Next.js App Router codebase
  • React Router converted to Next.js navigation
  • TypeScript preserved
What stays the same:
  • Database (still on Lovable’s Supabase)
  • Auth (still using Lovable’s managed auth)
  • Storage (still on their buckets)

​
Real-World Example

import { Link, useNavigate, useLocation } from 'react-router-dom';

export const Navigation = () => {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <nav>
      <Link to="/dashboard">Dashboard</Link>
      <button onClick={() => navigate('/settings')}>
        Settings
      </button>
      <p>Current: {location.pathname}</p>
    </nav>
  );
};

​
Quick Command Reference

TaskCommandCredits
Test single filenext-lovable convert file.tsx --dry-runFree
Convert filenext-lovable convert file.tsx1 per file
Preview full migrationnext-lovable migrate ./app --dry-runShows estimate
Full migrationnext-lovable migrate ./app ./next-app1 credit

​
Next Steps

Install CLI

Get the tool installed in 2 minutes

Quick Start

Convert your first file

Full Migration

Migrate an entire project
Need to migrate your backend too? Check out Cloud Migration for the complete escape plan.