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.

JavaScript

// Filename - pages/index.jsimportImagefrom"next/image";importlogofrom"../src/logo.svg";functionApp(){return(<divclassName="App"><headerclassName="App-header"><Imagesrc={logo}className="App-logo"width={200}height={200}alt="logo"/><p>Edit<code>src/App.js</code> and save toreload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">LearnReact</a></header></div>);}exportdefaultApp;

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.

What is splat in CoffeeScript ?