How to Migrate from Create React App to Next JS ?

Last Updated : 11 Sep, 2024

Migrating from Create React App to Next.js is a structured process that includes setting up a Next.js project, reorganizing your files, updating dependencies, and utilizing Next.js features for better performance and server-side rendering.

Prerequisites:

Approach

To migrate from create react app to NextJS first create the project using create-react-app, then uninstall the react-script and add nextjs as dependency. Update the package.json file along with the project structure similar to next project.

Steps to Migrate from create react app to NextJS

Step 1: Initialize React Project using CRA command

Open the directory where you want to create your react app and then open your command line or PowerShell/terminal and run the following command to create-react-app.

npx create-react-app react-to-next
cd react-to-next 
npm start

Step 2: Remove the React Script from dependencies

Uninstall the dependencies. Now we have to uninstall the dependencies which are react-scripts.

npm uninstall react-scripts

Step 3: Install NextJS as Dependency

Now install the Next package or dependency. Run the following command to install next.

npm i next

Step 4: Update scripts in package.json

Change the scripts of the package.json. Copy and paste the following script into your package.json file.

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
},

Step 5: Update the Project Structure

Create a pages folder in your root directory. After creating your folder named as pages create a javascript file named index.js inside the pages folder.

Project Structure:

Directory

Example: This example demonstrate creating Next JS application.

// Filename - pages/index.js

import Image from "next/image";
import logo from "../src/logo.svg";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <Image
                    src={logo}
                    className="App-logo"
                    width={200}
                    height={200}
                    alt="logo"
                />
                <p>
                    Edit <code>src/App.js</code> and save to
                    reload.
                </p>

                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );
}

export default App;

Step to run the application: Run the App by the following command:

npm run dev

Output: This output will be visble on http://localhost:3000/ on the browser window.

Summary

Migration to NextJS starts by creating project with Create React App. Then, uninstall react-scripts and add Next.js as a dependency. Update the package.json file and restructure your project to align with the Next.js format.