React es una de las librerías más populares del mundo del desarrollo Web actual. Enfocada en la creación de interfaces dinámicas e interactivas, ha tenido un crecimiento muy grande en su comunidad en los últimos años.
Next.js es un framework que llega para ayudarnos con la creación de páginas dinámicas del lado del servidor y que nos ofrece una solución muy potente para trabajar con React.
Next.js es una herramienta que nos ayuda en la misión de realizar el «render-side rendering», es decir, el renderizado de las páginas o pantallas de la aplicación directamente en el servidor. De esta manera, el «peso» del procesamiento y creación de páginas lo volcamos principalmente al lado servidor. Esta técnica también resulta adecuada cuando pensamos en el posicionamiento en los buscadores (SEO), ya que posee un muy eficiente manejo de rutas para las URLs que conformen nuestro proyecto.
Una de las ventajas de este framework es que no resulta necesario aprender otros lenguajes. Si manejamos HTML, CSS y JavaScript (con el plus de manejar React.js y Node.js) tendremos una buena base para trabajar.
Para comenzar, debemos tener instalado Node.js y sobre la carpeta donde guardamos nuestros proyectos, podemos utilizar el setup automático de Next.js. Para esto ccorremos el siguiente comando:
npm install --save next react react-dom
En el archivo package.json debemos asegurarnos tener las siguientes líneas:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}Otro camino es utilizar el setup automático de Next.js que nos permite tener una App de modelo con la última versión de Next.js. Esta alternativa está disponible si creamos el proyecto con el comando:
npx create-next-app@latest
¿Un ejemplo para crear nuestra pantalla de inicio? Nos servirá, conocer un poco de React y en la estructura de un proyecto Next.js. Creamos el archivo, por ejemplo pages/index.js y ponemos un código como el siguiente:
export default function Home() {
return (
<div>
<h1>Inicio</h1>
<p>Esta es la pantalla de Inicio</p>
</div>
);
}El proceso completo para crear nuestra primera App, lo podremos ver en la documentación oficial: https://github.com/zeit/next.js/.
Sin dudas, aquellas personas que tengas experiencia previa con el manejo de paquetes de Node.js y la manera de codificar de React.
Para conocer más sobre Next.js podremos ingresar en el sitio Web: https://nextjs.org/ .
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta