Si ha creado una aplicación web utilizando Next.js pero ahora necesita convertirla en una aplicación React.js pura, no está solo. Ya sea por simplicidad, requisitos específicos del proyecto o preferencia por la representación del lado del cliente, la conversión de Next.js a React puede ser sencilla con la orientación adecuada. En este artículo, lo guiaré a través de los pasos para convertir una aplicación Next.js a React.js, garantizando una transición fluida y manteniendo la funcionalidad principal de su aplicación.

Nota: Si estás buscando convertir una aplicación React.js a Next.js, consulta mi otro artículo sobre cómo convertir React.js a Next.js.

¿Por qué convertir Next.js a React.js?

Next.js es un marco fantástico que ofrece renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG) y una serie de otras funciones listas para usar. Sin embargo, estas funciones pueden resultar excesivas para proyectos más pequeños o innecesarias si prefiere la renderización del lado del cliente (CSR) con React.js. La conversión a React.js puede simplificar el proceso de compilación, reducir las dependencias del servidor y brindarle más control sobre la arquitectura de su aplicación.

Comprender las diferencias

Antes de sumergirse en el proceso de conversión, es esencial comprender las diferencias clave entre Next.js y React.js:

• Representación del lado del servidor versus representación del lado del cliente: Next.js admite SSR y SSG, mientras que React.js es principalmente para CSR.
• Enrutamiento: Next.js tiene un sistema de enrutamiento integrado basado en archivos. En React.js, necesitarás usar una biblioteca como React Router.
• Rutas API: Next.js te permite crear rutas API dentro del mismo proyecto. En React.js, normalmente separarías el frontend y el backend.

Pasos para convertir Next.js a React.js

Comencemos con la guía paso a paso sobre cómo convertir una aplicación Next.js a React.js.

1. Configure una nueva aplicación React.js

Primero, cree un nuevo proyecto React.js usando una herramienta como Create React App (CRA) o Vite.

Usando la aplicación Create React:

npx create-react-app my-react-app
cd my-react-app

Usando Vite:

npm init vite@latest my-react-app --template react
cd my-react-app
npm install

2. Transferir dependencias

Copie las dependencias y devDependencies del paquete.json de su proyecto Next.js al paquete.json del nuevo proyecto React.js. Ejecute npm install o Yarn install para instalarlos.

3. Migrar componentes y páginas

Copie el contenido de los directorios de páginas y componentes de Next.js en el directorio src de su proyecto React.js. Dado que Next.js utiliza un directorio de páginas para el enrutamiento, deberás ajustar esta estructura.

4. Implementar enrutamiento con React Router

Next.js maneja el enrutamiento automáticamente según el directorio de páginas. En React.js, deberás configurar el enrutamiento manualmente.

Instalar enrutador React:

npm install react-router-dom

Configurar rutas en src/App.js:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Home'
import About from './About'
// Import other components as needed

function App() {
  return (
    } />
        } />
        {/* Add other routes */}
      
  )
}

export default App

5. Ajustar los métodos de obtención de datos

En Next.js, la obtención de datos se realiza mediante getServerSideProps, getStaticProps o getInitialProps. En React.js, necesitarás manejar la obtención de datos dentro de tus componentes, normalmente usando useEffect y useState.

Ejemplo:

import { useState, useEffect } from 'react'

function Home() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data') // Update the API endpoint as needed
      .then((response) => response.json())
      .then((data) => setData(data))
  }, [])

  return 
{/* Render your data */}
}

export default Home

6. Manejar rutas API

Si su aplicación Next.js usa rutas API dentro del directorio páginas/api, deberá migrarlas a un servicio backend separado o ajustar su interfaz para obtener API externas.

Opciones:

• Cree un backend separado: use Node.js, Express o cualquier marco de backend para configurar puntos finales de API.
• Utilice API externas: si es posible, ajuste su interfaz para consumir API externas directamente.

7. Actualizar las variables de entorno

Next.js utiliza variables de entorno con el prefijo NEXT_PUBLIC_ para las variables del lado del cliente. En React.js, cree un archivo .env en la raíz de su proyecto y prefije las variables con REACT_APP_.

Ejemplo:

REACT_APP_API_URL=https://api.example.com

Acceda a ellos en su código usando Process.env.REACT_APP_API_URL.

8. Eliminar configuraciones específicas de Next.js

Elimine cualquier configuración específica de Next.js como next.config.js. Además, elimine cualquier importación o paquete específico de Next.js que ya no sea necesario.

9. Pruebe su aplicación

Ejecute su aplicación React.js para asegurarse de que todo funcione como se esperaba.

npm start

Revise cada ruta y funcionalidad para verificar que la conversión se haya realizado correctamente.

Conclusión

Convertir una aplicación Next.js a React.js implica configurar un nuevo proyecto de React y migrar sus componentes, ajustar el enrutamiento y manejar la obtención de datos de manera diferente. Si bien Next.js ofrece muchas funciones potentes, una aplicación React.js pura proporciona simplicidad y flexibilidad, especialmente para proyectos que no requieren renderizado del lado del servidor.

Si sigue esta guía sobre cómo convertir Next.js a React.js, debería tener una transición perfecta.

¡Gracias por leer! Si está interesado en hacer lo contrario, consulte mi artículo sobre cómo convertir una aplicación React.js a Next.js. Para obtener más actualizaciones sobre nuevos proyectos o artículos, sígueme en Twitter: @jake_prins.