Migrating from Create React App (CRA) to Next.js: A Step-by-Step Guide

January 6, 2025 · 5 min read

Jigar Vishwakarma

Next.js has been a popular choice among React developers because to its built-in features like as server-side rendering (SSR), static site generation (SSG), and a strong emphasis on performance and scalability. If you already have a project developed with Create React App (CRA) and want to migrate to Next.js, this guide will bring you through the process step by step.

Why Migrate from CRA to Next.js?#

Before diving into the migration process, let's explore the benefits of Next.js over CRA:

Improved Performance:SSR and SSG increase page load time and SEO.
Built-in Routing: Next.js provides file-based routing, which eliminates the requirement for libraries such as React Router.
API Routes: Create serverless functions from within your app.
Optimized Bundling: Next.js offers improved tree-shaking and code splitting.

Learn more about Next.js features.

Step 1: Set Up the Next.js Project#

Start by creating a new Next.js project:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

If you use TypeScript in your CRA project, you can enable it in Next.js by renaming files to '.tsx' and installing the required dependencies:

touch tsconfig.json
npm install --save-dev typescript @types/react @types/node

Step 2: Move CRA Files to Next.js#

1. Copy `src` Files#

Copy all files from the src folder in your CRA project to the pages or components folder in your Next.js project. Organize them logically:

Place React components in a components folder.
Place page-level components in the pages folder.

2. Transfer Static Files#

Move files from the public directory of CRA to the public directory in Next.js.

3. Remove `index.js`#

Next.js uses pages/index.js as the default entry point. Rename or move your App.js content to pages/index.js.

Step 3: Update Routing#

Next.js employs file-based routing, so you don't require a routing package like React Router. Replace React Router routes with this file structure:

1. Update Route Logic#

In CRA:

<BrowserRouter>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
</BrowserRouter>

In Next.js, create corresponding files:

pages/
  index.js       // for Home
  about.js       // for About

2. Update Navigation#

Replace <Link> from React Router with Next.js's <Link>:

import Link from 'next/link';

function Navbar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
    </nav>
  );
}

Step 4: Update Styles#

If you're using CSS or Sass, ensure styles are compatible with Next.js:

1. Global Styles#

Move CRA's index.css to styles/globals.css in Next.js.

Import it in pages/_app.js:

import '../styles/globals.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

2. CSS Modules#

Next.js supports CSS Modules out of the box. Rename CSS files to [ComponentName].module.css and import them directly into the component.

Step 5: Update API Calls#

Next.js supports server-side logic via API routes. If your CRA app relies on a separate backend or makes API calls, you can:

1. Migrate API Calls#

Move server-side logic to pages/api. For example:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js!' });
}

2. Update Client-Side Fetches#

Update fetch URLs to point to the new API routes or external APIs.

Step 6: Optimize for SSR and SSG#

Next.js provides several data-fetching methods. Replace CRA's useEffect with appropriate Next.js methods:

1. Static Site Generation (SSG)#

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return {
    props: { data: json },
  };
}

export default function Home({ data }) {
  return <div>{data.title}</div>;
}

2. Server-Side Rendering (SSR)#

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function Page({ data }) {
  return <div>{data.title}</div>;
}

Step 7: Install Required Dependencies#

Next.js requires some specific dependencies that may differ from CRA:

Install any missing packages:

npm install next react react-dom

Install additional packages if you used specific libraries in CRA (e.g., Axios, Redux, Tailwind CSS).

Step 8: Test the Application#

Run the development server:

npm run dev

Check the console and fix any errors or warnings.
Test all pages and routes to ensure the migration was successful.

Step 9: Deploy the Next.js App#

Next.js simplifies deployment with platforms like Oikos by Nife:

Push your project to a Git repository (e.g., GitHub).
Build your Next.js app locally.
Upload your build app from the Oikos dashboard and deploy it.

Learn more about Site Deployment.

Conclusion#

Migrating from CRA to Next.js may appear difficult, but by following these steps, you may fully benefit from Next.js' advanced capabilities and performance optimizations. Your migration will go smoothly and successfully if you plan ahead of time and test thoroughly.

Recent posts