Skip to content
Related Articles

Related Articles

How to migrate from create react app to Next.js ?

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Hard
  • Last Updated : 25 Mar, 2022

In this article, we will learn how we can move from ReactJS to NextJS. Next.js is an open React framework created by Vercel, developed by Google and Facebook. Advertised as a zero-zero series, a single command of React applications. Next.js is an excellent framework for React developers to build dedicated sites on the server side.

React Thunderstorms also helped to raise the Next. The framework helps to increase SEO, website speed while providing code sharing and API path and that is why we decided to move from React to Next.js.

Approach to Migrate from Create React app to Next.js: 

  • Create a react app with create-react-app.
  • Uninstall the dependency (react-scripts).
  • And then install the next app dependency.
  • Change the scripts and package.json.
  • Create a pages folder with a index.js file.

Creating NextJS Application:

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

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

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

npm uninstall react-scripts 

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

npm install next 

Step 4: 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: 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: It will look like this.

Directory 

Example: Write down the following code in respective file.

Filename: pages/index.js

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!