> ## 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.
# Quick Start
> Get up and running with next-lovable in 5 minutes
**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`:
```tsx Navigation.tsx theme={null}
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 (
);
};
```
### Step 2: Preview the Conversion
See what changes will be made without modifying the file:
```bash theme={null}
next-lovable convert Navigation.tsx --dry-run --show-diff
```
Expected output
You'll see a diff showing:
* React Router imports → Next.js imports
* `useNavigate()` → `useRouter()`
* `useLocation()` → `usePathname()`
* `` → ``
* Addition of `'use client'` directive
### Step 3: Apply the Conversion
Convert the file:
```bash theme={null}
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.
```tsx Before theme={null}
import { Link, useNavigate, useLocation } from 'react-router-dom';
export const Navigation = () => {
const navigate = useNavigate();
const location = useLocation();
// ... rest of component
```
```tsx After theme={null}
'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:
```bash theme={null}
# 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:
```bash theme={null}
next-lovable convert src/Navigation.tsx --output converted/Navigation.tsx
```
### Available Transformations
React Router → Next.js navigation
React Helmet → Next.js Head
Auto-detect client components
React Context migration
List all available transformations:
```bash theme={null}
next-lovable convert --list
```
## What's Next?
Convert other components in your React app to get familiar with the tool
Ready for a complete project migration? Check out our [migration guide](/0.0.7/commands/migrate)
See more [real-world examples](/0.0.7/examples/basic-conversion)
**Important**: Always backup your code before running conversions, especially when working with important files!
## Need Help?
Detailed CLI documentation
Common issues and solutions
Tips for successful migrations