Next-Lovable

    next-lovable

    A powerful CLI tool to seamlessly migrate React applications to Next.js 13+ with App Router support. Transform your Lovable/Vite projects with just one command.

    One-Command Migration
    Safe & Reliable

    Key Features

    Smart Router Conversion

    Automatically converts React Router to Next.js App Router

    Vite to Next.js Migration

    Seamlessly migrates from Vite to Next.js build system

    Dependency Management

    Handles package.json dependencies automatically

    Component Preservation

    Preserves existing components, layouts, and metadata

    Next.js Configuration

    Adds necessary Next.js configuration files

    TypeScript Support

    Full support for TypeScript projects

    Safe Preview Mode

    Includes --dry-run mode for safe preview

    Prerequisites

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

    Installation

    Install the CLI tool globally using npm:

    $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
    ⚠️

    Important: Always test compatibility first!

    Run next-lovable ./your-project --dry-run to check if your project is compatible before purchasing credits.

    Usage Guide

    Basic Usage

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

    Replace <source-directory> with your React project path. The target directory is optional - if not specified, a new directory will be created.

    Advanced Usage

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

    Command Options

    -y, --yes

    Skip confirmation prompts

    -i, --install

    Install dependencies after migration

    -d, --dry-run

    Preview migration with no file changes

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

    4. Dry run (preview only, no file changes):

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

    Migration Process

    Understanding how next-lovable transforms your React project

    1

    Setup and Validation

    • • Validates source project structure
    • • Creates target directory
    • • Checks compatibility requirements
    2

    Project Structure

    • • Copies project files safely
    • • 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. 1Review generated files in src/app
    2. 2Check component imports and paths
    3. 3Update any remaining router-specific code
    4. 4Test the application with npm run dev

    Known Limitations

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

    Some complex routing logic or deeply customized setups may require manual review after migration.

    Ready to migrate your React app?

    Get started with next-lovable today and transform your React application into a modern Next.js project in minutes.

    $npm install -g next-lovable