Migrating from Create React App to NextJS: A Practical Guide - Coding

Migrating from Create React App (CRA) to Next.js involves transitioning from a client-side rendered React application to a framework that offers server-side rendering, static site generation, and built-in routing capabilities. This guide provides a step-by-step approach to help you effectively migrate your project and take advantage of Next.js’s powerful features.

Steps to Migrate from React App to Next JS

Step 1: Initialize React Project

Run the following command in your terminal:

npx create-react-app myReactApp

Once the installation is complete, you will see a message :

Happy hacking!

Step 2: Switch to Project directory

Now we can navigate into the project:

cd myReactApp

Step 3: Run the project

Use the below command to run the project

npm run start

This will produce the following message:

Starting the development server…
Compiled successfully!
You can now view trial in the browser.
Local: http://localhost:3000

This means the local server is up and running and once you open your browser and navigate to http://localhost:3000, you should see your React application:

Project Structure :

node_modules folder contains all dependencies for our project.
public folder contains static assets like images which are publicly accessible. It also has an index.html file which is the entry point of our application. This file has an empty div with the id of “root”
src folder is the place for all the components of our app. It also has all the css files. The index.js file is the JavaScript entry point for the application, it grabs the empty div with the id of “root” and populates it with the App.js component.

Step 4: Remove react scripts

First uninstall react-scripts dependencies which was installed with the create-react-app tool.

npm uninstall react-scripts

Step 5: Install Next.js dependencies

Now we will install the “next” dependency. Run the following command in your terminal :

npm install next

After this we need to change the scripts inside the package.json file. Head to your package.json file and locate the “scripts” object. It should look something like this :

old package.json

Change it and add NextJS scripts as follows :

new package.json

Step 6: add TypeScript support

We also need to install typescript which is the default language for NextJs apps.

npm install -g typescript

After this, run the following command in your terminal which will create a tsconfig.json file, required for running the TypeScript code:

tsc --init

In the end your package.json file should look like this:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "next": "^14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "web-vitals": "^2.1.4"
}

Step 7: Set up project components

Creating Pages:

Leave the public folder as it is.
Delete the index.html file as we no longer need it.
Create a folder called “app” in the root level of the project.
Inside the app directory, create a layout.tsx file. Add the following code to the layout.tsx file:

JavaScript

// layout.tsx

export const metadata = {
    title: 'My Next JS App',
    description: 
    'Migrating from create-react-app to NextJS : a practical guide',
}

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
            <body>
                <h2>Coding is fun!</h2>
                {children}
            </body>
        </html>
    )
}

This is the root layout of the website, meaning the entire app will follow this layout.
Here we have added an H2 before rendering the {children}. This means that the H2 text will always appear on all the pages, and below it the page content will be rendered.
Now inside app folder, create another file called page.tsx
Copy and paste the following piece of code inside page.tsx file:

JavaScript

// page.tsx

import React from 'react'
export default function App(){
    return(
        <>
            <p>This is the home page of my website</p>
        </>
    )
}

Step 9: Define custom component

Components in NextJs create a components folder in the root level of the project and add a file called “myButton.tsx” inside it, which will have the following simple piece of code :

JavaScript

// myButton.tsx

import React from "react"
export default function MyButton() {
    return (
        <>
            <button>CLICK ME!</button>
        </>
    )
}

Now let us create an “About” page for our app which will call this button. Inside the app directory, create a folder called “about” and add a “page.tsx” file inside it with the following piece of code :

JavaScript

// page.tsx

import React from "react";
import MyButton from "../../components/myButton";

export default function About(){
    return(
        <>
            <p>This is the about page</p>
            <MyButton/>
        </>
    )
}

Output: Navigate to “http://localhost:3000/about” in your web browser and it should look like this :

Conclusion

Migrating from Create React App to Next.js involves transitioning to a more powerful framework that offers server-side rendering, static site generation, and improved routing. By following this guide, you can systematically migrate your application, leveraging Next.js’s features to enhance performance and user experience.

Elevate your coding journey with a Premium subscription. Benefit from ad-free learning, unlimited article summaries, an AI bot, access to 35+ courses, and more-available only with GeeksforGeeks Premium! Explore now!

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
What is Utweb.exe & How to Fix its System Errors?
Convert Boolean To String In Pandas Dataframe
New Features of strict Mode in React 18
New DOM Methods in React 18
How to send a POST Request with PHP ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14