RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/reactjs/how-to-migrate-from-create-react-app-to-next-js/ below:

How to Migrate from Create React App to Next JS ?

Last Updated : 23 Jul, 2025

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.

JavaScript


 // 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://react.dev/"
                    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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4