What Gets Converted

The CLI handles the mechanical transformation of React patterns to Next.js equivalents. Here’s the comprehensive breakdown.

Navigation Hooks

import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/dashboard');
  };
};

'use client';

import { useRouter } from 'next/navigation';

const MyComponent = () => {
  const router = useRouter();
  
  const handleClick = () => {
    router.push('/dashboard');
  };
};

Link Components

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

import Link from 'next/link';

<Link href="/about">About</Link>

Location/Pathname

import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  
  return (
    <div>
      <p>Path: {location.pathname}</p>
      <p>Query: {searchParams.get('id')}</p>
    </div>
  );
};

'use client';

import { usePathname, useSearchParams } from 'next/navigation';

const MyComponent = () => {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  
  return (
    <div>
      <p>Path: {pathname}</p>
      <p>Query: {searchParams.get('id')}</p>
    </div>
  );
};

Route Parameters

import { useParams } from 'react-router-dom';

// Route: /user/:id
const UserProfile = () => {
  const { id } = useParams();
  return <div>User: {id}</div>;
};

'use client';

import { useParams } from 'next/navigation';

// File: app/user/[id]/page.tsx
const UserProfile = () => {
  const params = useParams();
  const id = params.id;
  return <div>User: {id}</div>;
};

Programmatic Navigation

import { useNavigate } from 'react-router-dom';

const MyComponent = () => {
  const navigate = useNavigate();
  
  const goBack = () => navigate(-1);
  const goForward = () => navigate(1);
  const replaceRoute = () => navigate('/new-route', { replace: true });
};

'use client';

import { useRouter } from 'next/navigation';

const MyComponent = () => {
  const router = useRouter();
  
  const goBack = () => router.back();
  const goForward = () => router.forward();
  const replaceRoute = () => router.replace('/new-route');
};

React Hooks

State Management

useState → Preserved
useReducer → Preserved
useContext → Preserved (with ‘use client’ added)

Side Effects

useEffect → Preserved
useLayoutEffect → Preserved
useInsertionEffect → Preserved

Memoization

useMemo → Preserved
useCallback → Preserved
useRef → Preserved

Custom Hooks

All custom hooks preserved
‘use client’ added if they use browser APIs
Type signatures maintained

Styling & CSS

Tailwind CSS

All Tailwind classes are preserved exactly as written:

// Before & After (unchanged)
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">

The CLI also preserves:

Tailwind configuration (copies tailwind.config.js)
Custom utility classes
@apply directives in CSS

CSS Modules

// Before
import styles from './Button.module.css';

<button className={styles.primary}>Click</button>

// After (unchanged)
import styles from './Button.module.css';

<button className={styles.primary}>Click</button>

Styled Components

Detected and preserved with ‘use client’ directive:

// Before
import styled from 'styled-components';

const Button = styled.button`
  background: blue;
`;

// After
'use client';

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
`;

Requires styled-components configuration in next.config.js for SSR compatibility.

React Helmet → Next.js Head

import { Helmet } from 'react-helmet';

const Page = () => (
  <>
    <Helmet>
      <title>My Page Title</title>
      <meta name="description" content="Page description" />
      <meta property="og:title" content="My Page" />
    </Helmet>
    <div>Content</div>
  </>
);

import Head from 'next/head';

const Page = () => (
  <>
    <Head>
      <title>My Page Title</title>
      <meta name="description" content="Page description" />
      <meta property="og:title" content="My Page" />
    </Head>
    <div>Content</div>
  </>
);

Context Providers

React Context is preserved with automatic ‘use client’ detection:

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

'use client';

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

File Structure Transformation

The CLI restructures your project from Vite/React Router conventions to Next.js App Router:

src/
├── App.tsx
├── main.tsx
├── components/
│   ├── Header.tsx
│   └── Navigation.tsx
├── pages/
│   ├── Home.tsx
│   ├── About.tsx
│   └── Contact.tsx
├── hooks/
│   └── useAuth.ts
└── styles/
    └── index.css

app/
├── layout.tsx
├── page.tsx           # Home
├── about/
│   └── page.tsx
├── contact/
│   └── page.tsx
└── globals.css
components/
├── Header.tsx
└── Navigation.tsx
hooks/
└── useAuth.ts

Automatic ‘use client’ Detection

The CLI analyzes your code and adds the ‘use client’ directive when needed:

Triggers 'use client'

React hooks (useState, useEffect, etc.)
Event handlers (onClick, onChange)
Browser APIs (window, document, localStorage)
Third-party client libraries

Stays Server Component

Pure presentational components
Data fetching
Async components
No browser APIs used

TypeScript Preservation

All TypeScript types are maintained:

Interface definitions
Generic types
Type aliases
Prop types
Return types
Import types

What’s Not Converted (By Design)

These remain unchanged and work as-is:

API calls (fetch, axios, etc.)
State management libraries (Redux, Zustand, etc.)
UI libraries (shadcn/ui, Material-UI, etc.)
Form libraries (React Hook Form, Formik, etc.)
Date libraries (date-fns, moment, etc.)
Testing code (Jest, Testing Library, etc.)

Want to see what breaks? Check out What Breaks.

Choose Your Migration

Quick Start

Full Backend Migration

Production Optimization

Pricing & Credits

What Gets Converted

What Gets Converted

React Router → Next.js Navigation

React Hooks

State Management

Side Effects

Memoization

Custom Hooks

Styling & CSS

React Helmet → Next.js Head

Context Providers

File Structure Transformation

Automatic ‘use client’ Detection

Triggers 'use client'

Stays Server Component

TypeScript Preservation

What’s Not Converted (By Design)

​What Gets Converted

​React Router → Next.js Navigation

​React Hooks

State Management

Side Effects

Memoization

Custom Hooks

​Styling & CSS

​React Helmet → Next.js Head

​Context Providers

​File Structure Transformation

​Automatic ‘use client’ Detection

Triggers 'use client'

Stays Server Component

​TypeScript Preservation

​What’s Not Converted (By Design)

What Gets Converted

React Router → Next.js Navigation

React Hooks

Styling & CSS

React Helmet → Next.js Head

Context Providers

File Structure Transformation

Automatic ‘use client’ Detection

TypeScript Preservation

What’s Not Converted (By Design)