Skip to main content
Version 0.0.6: This version requires authentication for all operations. Consider upgrading to 0.0.7+ for free single file conversions.

​
Prerequisites

Before you begin, make sure you have:
1

Valid Account

Create an account at nextlovable.com

​
Your First Migration

Let’s start with migrating a simple React project:

​
Step 1: Prepare Your React Project

Make sure you have a React project with React Router. Here’s a sample structure: 
my-react-app/
├── src/
│   ├── App.tsx
│   ├── components/
│   │   └── Navigation.tsx
│   └── pages/
│       ├── Home.tsx
│       └── About.tsx
├── package.json
└── vite.config.js

​
Step 2: Preview the Migration (Dry Run)

See what changes will be made without modifying anything: 
next-lovable ./my-react-app --dry-run

​
Step 3: Execute the Migration

Run the actual migration: 
next-lovable ./my-react-app ./my-next-app --yes --install
This will:
  • Create a new Next.js project in ./my-next-app
  • Convert React Router to Next.js App Router
  • Add ‘use client’ directives where needed
  • Install all dependencies
  • Set up the proper Next.js configuration

​
Step 4: Review and Test

1

Navigate to the new project

cd my-next-app
2

Start the development server

npm run dev
3

Open in browser

Visit http://localhost:3000 to see your migrated app

​
Command Structure (v0.0.6)

Version 0.0.6 uses a simpler command structure: 
next-lovable <source-directory> [target-directory]

​
Available Options

​
source-directory
string
required
Path to your React application
​
target-directory
string
Where to create the new Next.js project (optional)
​
--dry-run, -d
boolean
Simulate migration without making changes
​
--yes, -y
boolean
Skip confirmation prompts
​
--install, -i
boolean
Install dependencies after migration

​
What Gets Converted

  • useNavigate() → useRouter()
  • <Link to=""> → <Link href="">
  • useLocation() → usePathname()
  • Route structure converted to App Router
  • Automatic ‘use client’ directive addition
  • Page components moved to app directory
  • Layout components properly structured
  • Vite config → Next.js config
  • Package.json scripts updated
  • Dependencies migrated

​
Example Migration

// src/App.tsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

​
Limitations in v0.0.6

Version 0.0.6 Limitations:
  • Requires authentication for all operations
  • No single file conversion mode
  • Limited transformation options
  • No granular control over conversions

​
Upgrade Benefits

Consider upgrading to version 0.0.7+ for:

Free Features

Single file conversions without authentication

Better Control

Granular transformation options

Improved CLI

Subcommand structure (convert, migrate)

Enhanced Performance

Faster processing and better error handling

​
Common Issues

  1. Check source directory permissions
  2. Ensure target directory is writable
  3. Verify sufficient disk space
  4. Review error messages for specific issues
  1. Run npm install in the target directory
  2. Check for TypeScript errors
  3. Review Next.js configuration
  4. Clear Next.js cache: rm -rf .next

​
What’s Next?

1

Explore the Generated Code

Review how your React components were converted
2

Test All Routes

Navigate through your app to ensure everything works
3

Deploy

Deploy your new Next.js app to your preferred platform
4

Consider Upgrading

Upgrade to version 0.0.7+ for enhanced features

Migration Command

Detailed CLI documentation

Troubleshooting

Common issues and solutions

Version 0.0.7+

Upgrade for more features
⌘I