NextJS - Crea aplicaciones Web renderizando en el Lado del Servidor con React y JavaScript
Al igual que PHP, tenemos una aplicación Back-End que recibe una solicitud, procesa y devuelve una respuesta, podemos utilizar la Lib NextJS que permite utilizar React y JavaScript en el lado del Servidor, para renderizar mucha información y devolver a la aplicación Front-End un código optimizado y entre otras ventajas tenemos:
- Un sistema intuitivo basado en rutas (incluyendo soporte para rutas dinámicas)
- Optimización automática de páginas estáticas
- Renderización de páginas en el lado del servidor, analizando y filtrando solicitudes.
- Mejora en la carga del sitio
- Enrutamiento del lado del cliente para optimización de las páginas
- Soporte para CSS nativo y bibliotecas CSS-in-JS
- Sistema basado en WebPack con el Hot Module Replacement (HMR) activado.
- Sistema de rutas de API para crear tu propia API con funciones serverless.
- Personalizable con plugins creados por la comunidad o tu propia configuración de Babel o WebPack.
NextJS es multiplataforma, lo que significa que funcionará muy bien en Windows, Linux y MacOS. Como muchos recursos de la web moderna, solo será necesario tener instalado NodeJS para comenzar a utilizarlo.
Vamos a crear un directorio hcode-ecommerce y acceder a ese directorio. A continuación, iniciaremos un archivo de configuración del NPM llamado package.json para almacenar la configuración del proyecto.
Dentro del directorio hcode-ecommerce crea un directorio llamado pages
A continuación, vamos a instalar React, React-Dom y NextJS almacenando en el Package.json la configuración de instalación. Abre el archivo package.json generado en el proyecto, en un editor de texto(IDE) recomendamos Visual Studio Code(VSCode)
En la línea 6 del archivo mencionado, tenemos la propiedad "scripts", reemplaza este fragmento por:
De esta manera, cada vez que ejecutemos el comando npm run dev el Node ejecutará el comando next.
Es posible que el sistema operativo solicite permiso para ejecutar NodeJS, solo haz clic en Permitir acceso.
Entonces piensas, hice algo mal, ¿por qué apareció una página de error 404... rsrsrs es la primera broma... todo está bien.
Quiero decir, si apareció un error 404 está correcto, si no, revisa las instrucciones y ve si no saltaste ningún paso, como crear la carpeta pages... es muy común equivocarse en este punto.
Ahora que la configuración de NextJS está finalizada, ¿vamos a crear nuestra primera página? En el próximo artículo, hasta entonces.
Glaucio Daniel