# Migrating from React to Next.js ### Migration from ReactJS to NextJS To migrate a ReactJS application to a Next.js application, follow these steps :thumbsup: #### **1. Set up a Next.js project**: ◦ Make a directory for the new Next.js project using the terminal. For example, create a folder named next-migration-project on the desktop and navigate into it. ◦ Initialize a package.json file in the project directory. This file holds the key properties for running the project, including dependencies. You can create an empty package.json file using the echo command in the terminal. ```bash // package.json echo "{}" > package.json ``` ◦ Alternatively, you can use the terminal in VS Code. #### **2. Install Dependencies**: ◦ **Install react, react-dom, and next** as dependencies using npm. Run the command **npm install react react-dom next** in the terminal. This downloads the necessary packages into the project. ```bash // install Dependencies npm install react react-dom next ``` ◦ The **package.json** file will be automatically updated with the dependencies and their versions. A **package-lock.json** file is also created to lock in the versions. ◦ The **node\_modules** folder contains the actual files of the dependencies. #### **3. Migrate React code**: ◦ Move the existing React code (e.g., **index.html**) into the Next.js project directory. ◦ Remove the React and ReactDOM tags from the HTML file because Next.js manages these dependencies.
◦ Remove the **HTM****L** and **body tags**, as Next.js creates these. Also, remove the **\
**. \ ◦ Remove the **\ ``` {% endtab %} {% tab title="From-React-to-NextJS" %} ```jsx // index.jsx import { useState } from 'react' function HomePage() { const [likes, setLikes] = useState(0) const names = [ 'Bakytbekov Jakypbai', 'Boobekov Dastan', 'Kuralbekov Nurjigit', 'Kyzdarbekov Nurdavlet', ] function handleClick() { console.log('Increment Like count') setLikes(likes + 1) } return ( <>
    {names.map((name, index) => (
  • {name}
    • ))}
) } function Header({ title, author }) { console.log(title, author) return

{author ? title+' by '+ author : 'No Book Found by' + author}

} /* const app = document.getElementById('root') ReactDOM.render(, app) */ export default HomePage ``` {% endtab %} {% endtabs %}