Introduction - Next-Lovable

Legacy Version: This is version 0.0.6 which requires authentication for all operations. Consider upgrading to version 0.0.7+ for free single file conversions and enhanced features.

What is next-lovable v0.0.6?

A CLI tool that automatically converts your React applications to Next.js 13+ using the new App Router. This legacy version provides full project migration capabilities with API-based processing.

Key Features

Complete Project Migration

Full React to Next.js App Router conversion

Smart Router Conversion

React Router to Next.js navigation transformation

Vite to Next.js Migration

Seamlessly migrates from Vite build system

Intelligent Components

Automatically adds ‘use client’ directives where needed

Get Started

Install the CLI

npm install -g next-lovable@0.0.6

Preview your migration

next-lovable ./my-react-app --dry-run

Run the migration

next-lovable ./my-react-app ./my-next-app --yes --install

Documentation

Installation Guide

Setup and authentication instructions

Quick Start

Your first migration in 5 minutes

Migration Command

Complete command reference

Troubleshooting

Common issues and solutions

Upgrade to v0.0.7+

Enhanced features and free conversions

What You Can Do

Full Project Migration (Authentication Required)

Complete Migration

Convert entire React applications to Next.js

Preview Changes

See exactly what will change before applying

What Gets Converted

React Router → Next.js App Router

useNavigate() → useRouter() from next/navigation
<Link to="/path"> → <Link href="/path"> from next/link
useLocation() → usePathname() and useSearchParams()
Route structure converted to app directory

Project Structure

Vite configuration → Next.js configuration
Component organization for App Router
Package.json scripts and dependencies
TypeScript configuration updates

Component Enhancements

Automatic “use client” directive addition
Server/client component separation
Import path optimization

Command Reference

Task	Command	Authentication	Credits
Preview migration	`next-lovable ./app --dry-run`	✅ Yes	❌ No
Full migration	`next-lovable ./app ./next-app`	✅ Yes	✅ Yes

Real-World Example

// 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;

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// app/page.tsx (Home)
export default function Home() {
  return <div>Home Page</div>;
}

// app/about/page.tsx
export default function About() {
  return <div>About Page</div>;
}

Version 0.0.6 Limitations

Important Limitations:

Authentication required for all operations
Credit consumption for all migrations
No single file mode - only full project migration
Limited error recovery compared to newer versions
Simpler CLI without subcommands

Why Upgrade to v0.0.7+?

Free Features

Single file conversions without authentication

Better CLI

Subcommand structure with more control

Enhanced Performance

Faster processing and better error handling

Granular Control

Choose specific transformations to apply

Migration Path: Existing v0.0.6 users can easily upgrade to the latest version for enhanced features and free single file conversions.

Command Structure

Version 0.0.6 uses a simple command structure:

# Basic migration
next-lovable <source-directory> [target-directory]

# With options
next-lovable ./my-app ./next-app --dry-run --yes --install

Available Options

--dry-run, -d - Preview changes without making them
--yes, -y - Skip confirmation prompts
--install, -i - Install dependencies after migration

🔧 Prerequisites

Node.js 16+

Version 0.0.6 requires Node.js 16.x or higher

React Project

A React application using React Router

nextlovable.com Account

Required for authentication and API access

Active Credits

Migration operations consume credits

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?

Start with v0.0.6

Use the current legacy version

Upgrade to Latest

Get enhanced features and free conversions

Legacy Support: While v0.0.6 continues to work, we recommend upgrading to version 0.0.7+ for the best experience with free features and enhanced capabilities.

What Gets Converted

React Router → Next.js Router

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

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

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

'use client';

import Link from 'next/link';
import { useRouter, usePathname } from 'next/navigation';

export const Navigation = () => {
  const router = useRouter();
  const pathname = usePathname();

  return (
    <nav>
      <Link href="/dashboard">Dashboard</Link>
      <Link href={`/profile/${userId}`}>Profile</Link>
      <button onClick={() => router.push('/settings')}>Settings</button>
      <p>Current: {pathname}</p>
    </nav>
  );
};

React Helmet → Next.js Head

import { Helmet } from 'react-helmet';

export const PageMeta = ({ title, description }) => (
  <Helmet>
    <title>{title}</title>
    <meta name="description" content={description} />
  </Helmet>
);

import Head from 'next/head';

export const PageMeta = ({ title, description }) => (
  <Head>
    <title>{title}</title>
    <meta name="description" content={description} />
  </Head>
);

Command Comparison Table

Task	Command	Credits Required	Authentication
Preview project migration	`next-lovable migrate ./my-app --dry-run`	❌	✅ Yes
Full project migration	`next-lovable migrate ./my-app ./next-app`	✅ Yes	✅ Yes

⚠️ Important Notes

Version 0.7+: Uses new subcommand structure (migrate, convert)Version 0.6 and earlier: Uses legacy command format

Always backup your original project before running a full migration!

Limitations & Best Practices

Known Limitations

Complex custom route configurations may need manual adjustments
Dynamic route parameters might require review
Some third-party integrations may need updates
Complex state management setups might need fine-tuning

Best Practices

Always test individual files first using the free convert command
Run --dry-run before any actual migration
Keep backups of your original project
Review generated files before deployment
Test thoroughly after migration

Getting Help

List Available Commands

next-lovable --help

Ready to migrate your React app to Next.js? Start with a simple file conversion to see the magic in action! 🚀

What is next-lovable v0.0.6?

​Key Features

Complete Project Migration

Smart Router Conversion

Vite to Next.js Migration

Intelligent Components

​Get Started

​Documentation

Installation Guide

Quick Start

Migration Command

Troubleshooting

Upgrade to v0.0.7+

​What You Can Do

​Full Project Migration (Authentication Required)

Complete Migration

Preview Changes

​What Gets Converted

​Command Reference

​Real-World Example

​Version 0.0.6 Limitations

​Why Upgrade to v0.0.7+?

Free Features

Better CLI

Enhanced Performance

Granular Control

​Command Structure

​Available Options

​🔧 Prerequisites

​Need Help?

Done for you

​Ready to Migrate?

Start with v0.0.6

Upgrade to Latest

​What Gets Converted

​React Router → Next.js Router

​React Helmet → Next.js Head

​Command Comparison Table

​⚠️ Important Notes

​Limitations & Best Practices

​Known Limitations

​Best Practices

​Getting Help

List Available Commands

Key Features

Get Started

Documentation

What You Can Do

Full Project Migration (Authentication Required)

What Gets Converted

Command Reference

Real-World Example

Version 0.0.6 Limitations

Why Upgrade to v0.0.7+?

Command Structure

Available Options

🔧 Prerequisites

Need Help?

Ready to Migrate?

What Gets Converted

React Router → Next.js Router

React Helmet → Next.js Head

Command Comparison Table

⚠️ Important Notes

Limitations & Best Practices

Known Limitations

Best Practices

Getting Help