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

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

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

npm run dev

Output: