Skip to main content

What is next-lovable?

A smart CLI tool that automatically converts your React applications to Next.js 14+ using the new App Router. It specializes in migrating React Router applications with zero manual work.

​
Key Features

Smart Router Conversion

Automatically converts React Router to Next.js App Router

Free Single File Testing

Test individual components without credits or authentication

Vite to Next.js Migration

Seamlessly migrates from Vite build system to Next.js

Intelligent Components

Automatically adds ‘use client’ directives where needed

​
Get Started in 2 Minutes

1

Install globally

npm install -g next-lovable
2

Try your first conversion (free!)

next-lovable convert MyComponent.tsx --dry-run --show-diff
3

Apply the conversion

next-lovable convert MyComponent.tsx
No account needed for single file conversions! Perfect for testing and learning.

​
Documentation

Installation Guide

System requirements and setup instructions

Quick Start

Your first conversion in 5 minutes

Convert Command

Free file conversion (no auth required)

Migrate Command

Full project migration (requires account)

Troubleshooting

Common issues and solutions

Best Practices

Tips for successful migrations

​
What You Can Do

​
Free Features (No Auth Required)

Single File Conversion

Convert individual React files to Next.js format

Preview Changes

See exactly what will change before applying

​
Premium Features (Account Required)

Full Project Migration

Convert entire React applications to Next.js

Batch Processing

Convert multiple files and directories at once

​
What Gets Converted

  • useNavigate() → useRouter() from next/navigation
  • <Link to="/path"> → <Link href="/path"> from next/link
  • useLocation() → usePathname() + useSearchParams()
  • useParams() → Next.js useParams()
  • <Helmet> → <Head> from next/head
  • Meta tags and title preservation
  • SEO attributes maintained
  • Automatic “use client” directive addition
  • Detects React hooks, event handlers, browser APIs
  • Maintains server/client component boundaries
  • Converts React Context providers
  • Maintains context functionality in Next.js structure
  • Preserves type safety

​
Quick Command Reference

TaskCommandCreditsAuth
Test conversionnext-lovable convert file.tsx --dry-run❌ Free❌ No
Convert filenext-lovable convert file.tsx❌ Free❌ No
Preview migrationnext-lovable migrate ./app --dry-run✅ Yes✅ Yes
Full migrationnext-lovable migrate ./app ./next-app✅ Yes✅ Yes

​
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>
  );
};

​
Important Notes

Version 0.7+: Uses new subcommand structure (convert, migrate)Version 0.6 and earlier: Uses legacy command format
Start with the free convert command to get familiar with the tool before migrating entire projects.

​
Need Help?

Done for you

We’ll convert your beautiful Lovable app into a lightning-fast, SEO-ready website that actually shows up in search results. No coding required.
Ready to migrate your React app to Next.js? Start with a quick conversion →
⌘I