next-lovable

    next-lovable

    A CLI tool to migrate React applications to Next.js 13+ (App Router).

    Features

    • Converts React Router routes to Next.js App Router
    • Migrates from Vite to Next.js build system
    • Handles package.json dependencies
    • Preserves existing components and layouts
    • Adds necessary Next.js configuration files
    • Supports TypeScript projects

    Prerequisites

    • Node.js 18.x or higher
    • npm or yarn
    • A React project using:
      • Generated using lovable.com
      • React Router
      • Vite
      • TypeScript

    Installation

    $npm install -g next-lovable

    Authentication

    When you run the CLI tool, you'll be prompted to authenticate with your credentials:

    $next-lovable ./my-react-app
    ? Email: youremail@gmail.com
    ? Password: [hidden]
    ✅ Successfully logged in!
    ✅ Authentication successful
    ? This will convert the React project at ..\ses-template-manager\ to Next.js in next-app. Continue? Yes

    Your free account includes 1 migration credit. Additional migrations require purchasing more credits.

    Usage

    Basic usage:

    $next-lovable <source-directory> [target-directory]

    With options:

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

    Options

    • -y, --yes: Skip confirmation prompts
    • -i, --install: Install dependencies after migration
    • --help: Show help information

    Examples

    1. Basic migration:

    $next-lovable ./my-react-app

    2. Specify target directory:

    $next-lovable ./my-react-app ./converted-app

    3. Non-interactive migration with dependency installation:

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

    Migration Process

    1. Setup and Validation
      • Validates source project
      • Creates target directory
    2. Project Structure
      • Copies project files
      • Restructures directories to Next.js format
      • Converts route structure
    3. Code Transformation
      • Adds 'use client' directives
      • Updates import paths
      • Converts router code
      • Creates Next.js page files
    4. Configuration
      • Updates package.json
      • Creates Next.js config files
      • Sets up root layout

    Post-Migration Steps

    1. Review generated files in src/app
    2. Check component imports and paths
    3. Update any remaining router-specific code
    4. Test the application with npm run dev

    Known Limitations

    • You may need to manualy to add the "use client" directive to certain components.