¿Cómo migrar de crear una aplicación de reacción a Next.js?

En este artículo, aprenderemos cómo podemos pasar de ReactJS a NextJS . Next.js es un marco React abierto creado por Vercel, desarrollado por Google y Facebook. Anunciado como una serie cero-cero, un solo comando de aplicaciones React. Next.js es un marco excelente para que los desarrolladores de React construyan sitios dedicados en el lado del servidor.

React Thunderstorms también ayudó a levantar Next. El marco ayuda a aumentar el SEO y la velocidad del sitio web al tiempo que proporciona código compartido y ruta API, y es por eso que decidimos pasar de React a Next.js.

Enfoque para migrar de la aplicación Create React a Next.js: 

• Cree una aplicación de reacción con create-react-app.
• Desinstale la dependencia (react-scripts).
• Y luego instale la siguiente dependencia de la aplicación.
• Cambie los scripts y el paquete.json.
• Cree una carpeta de páginas con un archivo index.js.

Creación de la aplicación NextJS:

Paso 1: abra su directorio donde desea crear su aplicación de reacción y luego abra su línea de comando o PowerShell ejecute el siguiente comando para crear-reaccionar-aplicación.

npx create-react-app react-to-next
cd react-to next 
npm start 

Paso 2: Desinstala las dependencias. Ahora tenemos que desinstalar las dependencias que son scripts de reacción.

npm uninstall react-scripts 

Paso 3: ahora instale el paquete o dependencia Next. Ejecute el siguiente comando para instalar a continuación.

npm install next 

Paso 4: cambie los scripts del paquete.json. Copie y pegue el siguiente script en su archivo package.json.

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
},

Paso 5: Cree una carpeta de páginas en su directorio raíz. Después de crear su carpeta con el nombre de páginas, cree un archivo javascript llamado index.js dentro de la carpeta de páginas.

Estructura del proyecto: Se verá así.

Ejemplo: Escriba el siguiente código en el archivo respectivo.

Nombre de archivo: páginas/index.js

índice.js

import Image from "next/image";
import logo from "../src/logo.svg";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <Image
                    src={logo}
                    className="App-logo"
                    width={200}
                    height={200}
                    alt="logo"
                />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>

                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );
}

export default App;