Next.js, un framework basado en React para el lado servidor

Next.js

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, corremos 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"
  }
}

¿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


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.