> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nextlovable.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Automatically migrate React applications to Next.js 13+ App Router - Legacy version with full authentication

<Warning>
  **Legacy Version**: This is version 0.0.6 which requires authentication for all operations. Consider upgrading to [version 0.0.7+](/0.0.7) for free single file conversions and enhanced features.
</Warning>

<Card title="What is next-lovable v0.0.6?" icon="lightbulb">
  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.
</Card>

## Key Features

<CardGroup cols={2}>
  <Card title="Complete Project Migration" icon="folder-arrow-right">
    Full React to Next.js App Router conversion
  </Card>

  <Card title="Smart Router Conversion" icon="route">
    React Router to Next.js navigation transformation
  </Card>

  <Card title="Vite to Next.js Migration" icon="box">
    Seamlessly migrates from Vite build system
  </Card>

  <Card title="Intelligent Components" icon="brain">
    Automatically adds 'use client' directives where needed
  </Card>
</CardGroup>

## Get Started

<Steps>
  <Step title="Install the CLI">
    ```bash theme={null}
    npm install -g next-lovable@0.0.6
    ```
  </Step>

  <Step title="Preview your migration">
    ```bash theme={null}
    next-lovable ./my-react-app --dry-run
    ```
  </Step>

  <Step title="Run the migration">
    ```bash theme={null}
    next-lovable ./my-react-app ./my-next-app --yes --install
    ```
  </Step>
</Steps>

## Documentation

<CardGroup cols={3}>
  <Card title="Installation Guide" href="/0.0.6/installation" icon="download">
    Setup and authentication instructions
  </Card>

  <Card title="Quick Start" href="/0.0.6/quick-start" icon="play">
    Your first migration in 5 minutes
  </Card>

  <Card title="Migration Command" href="/0.0.6/commands/migrate" icon="folder-arrow-right">
    Complete command reference
  </Card>

  <Card title="Troubleshooting" href="/0.0.6/guides/troubleshooting" icon="wrench">
    Common issues and solutions
  </Card>

  <Card title="Upgrade to v0.0.7+" href="/0.0.7" icon="arrow-up">
    Enhanced features and free conversions
  </Card>
</CardGroup>

## What You Can Do

### Full Project Migration (Authentication Required)

<CardGroup cols={2}>
  <Card title="Complete Migration" icon="folder">
    Convert entire React applications to Next.js
  </Card>

  <Card title="Preview Changes" icon="eye">
    See exactly what will change before applying
  </Card>
</CardGroup>

## What Gets Converted

<AccordionGroup>
  <Accordion title="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
  </Accordion>

  <Accordion title="Project Structure">
    * Vite configuration → Next.js configuration
    * Component organization for App Router
    * Package.json scripts and dependencies
    * TypeScript configuration updates
  </Accordion>

  <Accordion title="Component Enhancements">
    * Automatic "use client" directive addition
    * Server/client component separation
    * Import path optimization
  </Accordion>
</AccordionGroup>

## 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

<CodeGroup>
  ```tsx Before (React + Vite) theme={null}
  // 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;
  ```

  ```tsx After (Next.js App Router) theme={null}
  // 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>;
  }
  ```
</CodeGroup>

## Version 0.0.6 Limitations

<Warning>
  **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
</Warning>

## Why Upgrade to v0.0.7+?

<CardGroup cols={2}>
  <Card title="Free Features" icon="gift">
    Single file conversions without authentication
  </Card>

  <Card title="Better CLI" icon="terminal">
    Subcommand structure with more control
  </Card>

  <Card title="Enhanced Performance" icon="gauge-high">
    Faster processing and better error handling
  </Card>

  <Card title="Granular Control" icon="sliders">
    Choose specific transformations to apply
  </Card>
</CardGroup>

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

## Command Structure

Version 0.0.6 uses a simple command structure:

```bash theme={null}
# 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

<Steps>
  <Step title="Node.js 16+">
    Version 0.0.6 requires Node.js 16.x or higher
  </Step>

  <Step title="React Project">
    A React application using React Router
  </Step>

  <Step title="nextlovable.com Account">
    Required for authentication and API access
  </Step>

  <Step title="Active Credits">
    Migration operations consume credits
  </Step>
</Steps>

## Need Help?

<CardGroup>
  <Card title="Done for you" href="https://nextlovable.com/done-for-you" icon="github">
    We'll convert your beautiful Lovable app into a lightning-fast, SEO-ready website that actually shows up in search results. No coding required.
  </Card>
</CardGroup>

## Ready to Migrate?

<CardGroup cols={2}>
  <Card title="Start with v0.0.6" href="/0.0.6/quick-start" icon="play">
    Use the current legacy version
  </Card>

  <Card title="Upgrade to Latest" href="/0.0.7" icon="arrow-up">
    Get enhanced features and free conversions
  </Card>
</CardGroup>

***

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

## What Gets Converted

### React Router → Next.js Router

<CodeGroup>
  ```tsx Before (React Router) theme={null}
  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>
    );
  };
  ```

  ```tsx After (Next.js) theme={null}
  '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>
    );
  };
  ```
</CodeGroup>

### React Helmet → Next.js Head

<CodeGroup>
  ```tsx Before (React Helmet) theme={null}
  import { Helmet } from 'react-helmet';

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

  ```tsx After (Next.js Head) theme={null}
  import Head from 'next/head';

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

## 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

<Note>
  **Version 0.7+**: Uses new subcommand structure (`migrate`, `convert`)

  **Version 0.6 and earlier**: Uses legacy command format
</Note>

<Warning>
  Always backup your original project before running a full migration!
</Warning>

## 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

1. **Always test individual files first** using the free `convert` command
2. **`Run --dry-run`** before any actual migration
3. **Keep backups** of your original project
4. **Review generated files** before deployment
5. **Test thoroughly** after migration

## Getting Help

<CardGroup>
  <Card title="List Available Commands" icon="terminal">
    ```bash theme={null}
    next-lovable --help
    ```
  </Card>
</CardGroup>

***

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