Quick Start

New to next-lovable? This guide will walk you through your first conversion in just a few minutes.

Your First File Conversion (Free)

Let’s start with converting a single React component - no account needed!

Step 1: Create a Sample Component

Create a file called Navigation.tsx:

Navigation.tsx

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

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

  const handleLogout = () => {
    navigate('/login');
  };

  return (
    <nav className="navbar">
      <Link to="/" className="nav-link">Home</Link>
      <Link to="/about" className="nav-link">About</Link>
      <Link to="/contact" className="nav-link">Contact</Link>
      <button onClick={handleLogout}>Logout</button>
      <span>Current path: {location.pathname}</span>
    </nav>
  );
};

Step 2: Preview the Conversion

See what changes will be made without modifying the file:

next-lovable convert Navigation.tsx --dry-run --show-diff

Step 3: Apply the Conversion

Convert the file:

next-lovable convert Navigation.tsx

Step 4: Review the Result

Your file is now converted to Next.js format! Open Navigation.tsx to see the changes.

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

export const Navigation = () => {
  const navigate = useNavigate();
  const location = useLocation();
  // ... rest of component

'use client';

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

export const Navigation = () => {
  const router = useRouter();
  const pathname = usePathname();
  // ... rest of component

Common Patterns

Testing Multiple Files

You can test several files at once:

# Test all components in a directory
next-lovable convert src/components/*.tsx --dry-run

# Test specific transformation types only
next-lovable convert MyComponent.tsx --transform router,client --dry-run

Saving to Different Location

Keep your original files intact:

next-lovable convert src/Navigation.tsx --output converted/Navigation.tsx

Available Transformations

router

React Router → Next.js navigation

helmet

React Helmet → Next.js Head

client

Auto-detect client components

context

React Context migration

List all available transformations:

next-lovable convert --list

What’s Next?

Try More Components

Convert other components in your React app to get familiar with the tool

Learn About Full Migration

Ready for a complete project migration? Check out our migration guide

Explore Examples

See more real-world examples

Important: Always backup your code before running conversions, especially when working with important files!

Need Help?

Command Reference

Detailed CLI documentation

Troubleshooting

Common issues and solutions

Best Practices

Tips for successful migrations

Choose Your Migration

Full Backend Migration

Production Optimization

Pricing & Credits

Quick Start

Your First File Conversion (Free)

Step 1: Create a Sample Component

Step 2: Preview the Conversion

Step 3: Apply the Conversion

Step 4: Review the Result

Common Patterns

Testing Multiple Files

Saving to Different Location

Available Transformations

router

helmet

client

context

What’s Next?

Need Help?

Command Reference

Troubleshooting

Best Practices

​Your First File Conversion (Free)

​Step 1: Create a Sample Component

​Step 2: Preview the Conversion

​Step 3: Apply the Conversion

​Step 4: Review the Result

​Common Patterns

​Testing Multiple Files

​Saving to Different Location

​Available Transformations

router

helmet

client

context

​What’s Next?

​Need Help?

Command Reference

Troubleshooting

Best Practices

Your First File Conversion (Free)

Step 1: Create a Sample Component

Step 2: Preview the Conversion

Step 3: Apply the Conversion

Step 4: Review the Result

Common Patterns

Testing Multiple Files

Saving to Different Location

Available Transformations

What’s Next?

Need Help?