Skip to main content
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

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

1

Try More Components

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

Learn About Full Migration

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

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