Migrating from React to Next.js

PreviousBackend Frameworks-NEXT.JS NextLesson 1: Key Concepts of NodeJS and Express for Backend Web Development

Last updated 1 month ago

Migrating from React to Next.js

Migration from ReactJS to NextJS

To migrate a ReactJS application to a Next.js application, follow these steps

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.

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

// 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 HTML and body tags, as Next.js creates these. Also, remove the <div id="app">. ◦ Remove the <script type="text/babel"> tag.

4. Convert to JSX: ◦ Rename index.html to index.js or index.jsx.

5. Import React: ◦ Import React at the top of the file using import React from 'react' or, to destructure the useState hook, use import { useState } from 'react'.

6. Export the component: ◦ Export the main component function using export default function HomePage().

7. Set up the development script: ◦ In package.json, add a "scripts" section to define a development script. ◦ Add the following script: "dev": "next dev".

8. Create the pages directory: ◦ Create a folder named pages in the root of the Next.js project. Next.js requires this specific folder structure. ◦ Move the index.js or index.jsx file into the pages folder.

9. Run the development server: ◦ Run the command npm run dev in the terminal to start the Next.js development server. ◦ Open a browser and navigate to http://localhost:3000 to view the application.

After completing these steps, the React application should be running in a Next.js environment. Next.js handles JSX transpilation and provides a streamlined development experience.

// index.html - Before migration
<html>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
      function HomePage() {
        const [likes, setLikes] = React.useState(0)

        const names = [
          'Bakytbekov Jakypbai',
          'Boobekov Dastan',
          'Kuralbekov Nurjigit',
          'Kyzdarbekov Nurdavlet',
        ]

        function handleClick() {
          console.log('Increment Like count')
          setLikes(likes + 1)
        }
        return (
          <>
            <div>
              <Header title="I love ReactJS" author="Caleb Park" />
              <Header title="I love NextJS" author="Samara" />
            </div>
            <div>
              <ul>
                {names.map((name, index) => (
                  <li key={index}> {name} </li>
                ))}
              </ul>
            </div>
            <button onClick={handleClick}> Like : {likes} </button>
          </>
        )
      }

      function Header({ title, author }) {
        console.log(title, author)
        return <h1> {author ? title : 'No Book Found by' + author}</h1>
      }

      const app = document.getElementById('root')
      ReactDOM.render(<HomePage />, app)
    </script>
  </body>
</html>

// 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 (
    <>
      <div>
        <Header title="I love ReactJS" author="Caleb Park" />
        <Header title="I love NextJS" author="Samara" />
      </div>
      <div>
        <ul>
          {names.map((name, index) => (
            <li key={index}> {name} </li>
          ))}
        </ul>
      </div>
      <button onClick={handleClick}> Like : {likes} </button>
    </>
  )
}

function Header({ title, author }) {
  console.log(title, author)
  return <h1> {author ? title+' by '+ author : 'No Book Found by' + author}</h1>
}

/*       const app = document.getElementById('root')
      ReactDOM.render(<HomePage />, app) */

export default HomePage