How to migrate from create react app to Next JS ?

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.

Prerequisites:

• NPM & Node.js
• React JS
• 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 an index.js file.

Steps to Create the Next JS Application:

Step 1: 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: 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 i 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:

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://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.