Skip to main content

​
What Gets Converted

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

​
React Router → Next.js Navigation

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>
  );
};

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

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

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 });
};

​
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

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
// 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>
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>
  </>
);

​
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);

​
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

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