Qué es Next.js, el framework JS de React para construir el futuro

Qué es Next.js, el framework JS de React para construir el futuro

 

Si hiciste una aplicación medianamente grande con React.js seguramente tuviste que configurar Babel, Webpack, un linter (ESLint?), un servidor de render, etc, etc., y de seguro sufriste la conocida Fatiga de JavaScript.

Next.js es un pequeño framework construido sobre React.js que viene a ayudar a reducir esta fatiga. ¿Cómo? Next nos permite, instalando una sola dependencia, tener configurado todo lo que necesitamos para crear una aplicación de React usando Babel, Webpack, server render y muchas otras técnicas como HMR o separación de código y… ¡hasta hace más fácil hacer deploy de nuestras aplicaciones!

Filosofía de Next.js

Inspiración

Next se basa en los 7 principios de las aplicaciones web de Guillermo Rauch (creador de socket.io, Next.js y colaborador de mongoose y muchos otros proyectos).

• Renderizar en el servidor no es opcional
• Actúa inmediatamente a las acciones de los usuarios
• Reacciona inmediatamente a los cambios de datos
• Controla el intercambio de datos con el servidor
• No rompas el historial, mejóralo
• Envía actualizaciones de código
• Predice el comportamiento del usuario

Inspirado por la facilidad de uso de PHP, y beneficiándose del sistema de módulos de JavaScript, haciendo que cada archivo exporte un componente de nuestra aplicación que puede probarse individualmente y pudiendo descargar miles más desde npm.

Cero configuración

Next.js logra proveer de un entorno de cero configuración asumiendo unas pocas cosas sobre la estructura de tu aplicación en el sistema de archivos, una de estas es que necesitamos crear una carpeta pages en la raíz de nuestro proyecto y cada archivo dentro de esa carpeta va a ser una ruta, así index.js es /, mientras que platzi.js sería /platzi.

Gracias a esto Next.js nos provee de un sistema de rutas, separación de código por ruta, actualizaciones de código sin necesidad de recargar y no tener que configurar nuestros entry points de WebPack ya que Next.js ya sabe donde buscar nuestros archivos.

Solo JavaScript, todo es una función

Cada ruta de nuestra aplicación no es más que un archivo de JavaScript que exporta un componente de React, el cual puede ser tan simple como una función y puede a su vez importar más componentes hechos sencillamente con funciones para que nuestra aplicación no sea otra cosa más que muchas funciones compuestas.

Incluso cuando se trata de estilizar nuestra aplicación Next.js nos provee de un sistema de CSS en JS llamado styled-jsx (creado especialmente para Next.js) que nos permite escribir nuestros estilos directo en JS haciendo uso de todo el poder de CSS.

¿Lo mejor de styled-jsx? Sólo genera el CSS necesario para los componentes renderizados (tanto en el servidor como en el cliente) y una vez un componente se deja de usar se quita su CSS, nunca vamos a tener más CSS del necesario y todo este va a estar hecho específicamente para nuestros componentes, es imposible que se pisen estilos.

Deploy sencillo

¿Cómo hacemos para llevar nuestra aplicación a producción? Con sólo correr el comando next build que nos da el framework ya tenemos una carpeta (llamada .next) con el código listo para producción, subimos eso a un servidor (el que sea) y corremos next start y listo.

¿Aún más fácil? Con now.sh simplemente configuramos los comandos build y start para que ejecuten next build y next start respectivamente y luego corremos now desde nuestra computadora, en unos minutos vamos a tener nuestra aplicación en producción, con HTTP/2 y auto escalable.

Empezando una aplicación

Ahora que vimos como Next.js nos ayuda a hacer aplicaciones fácilmente, vamos a ver como usarlo. Para eso vamos a iniciar una proyecto con yarn init y luego vamos a instalar Next.

yarn add next react react-dom && yarn add -D now

Next nos pide que instalemos react y react-dom por nuestra cuenta para que podamos cambiarlos de versión sin depender de que Next se actualice.

Luego vamos a configurar en nuestro package.json los siguientes scripts.

{
	"dev": "next",
	"build": "next build",
	"start": "next start",
	"deploy": "now"
}

Ahora vamos a crear el archivo index.js dentro de la carpeta pages y dentro vamos a colocar este código.

import React from 'react';
import Link from 'next/link';

function HomePage() {
	return (
		<main>
			<h1>Página principal</h1>
			<Link href="/about">
				<a>Ir a <em>/about</em></a>
			</Link>
			<style jsx>{`
				h1 { color: red; }
			`}</style>
		</main>
	);
}

export default HomePage;

Con eso ya tenemos nuestro home y podemos iniciar nuestra aplicación con yarn dev. Esto inicia un servidor HTTP en localhost:3000, si entramos vamos a ver el texto Página principal en color rojo y un enlace a /about, si hacemos click nos va a mostrar una página de error 404.

Next implementa su propia página de error por defecto, pero creando un archivo _error.js dentro de pages podemos personalizarla sin problemas.

Ahora vamos a crear el archivo about.js dentro de pages con el siguiente código.

import React, { Component } from 'react';
import Link from 'next/link';

class AboutPage extends Component {
	static async getInitialProps() {
		return { name: 'Platzi' };
	}

	render() {
		return (
			<main>
				<h1>About {this.props.name}</h1>
				<Link prefetch href="/">
					<a>Ir a <em>/</em></a>
				</Link>
				<style jsx>{`
					h1 { color: blue; }
				`}</style>
			</main>
		);
	}
}

export default AboutPage;

Si volvemos a / y luego hacemos click en el enlace que habíamos hecho vamos a ver que esta vez ¡Sí nos muestra nuestra página de about! Y no solo eso, el título de esta página ahora es azul (gracias a los estilos por componente) y vemos que dice About Platzi, si notamos acá incluimos un método asíncrono y estático llamado getInitialProps.

Este método es ejecutado durante el renderizado en el servidor (cuando el usuario entra por primera vez) para obtener los datos necesarios para hacer el render de la página, y luego cuando se hace un cambio de ruta en el navegador se ejecuta para obtener los datos en el navegador.

Estos datos se obtendrían en ambos casos desde una API externa al servidor que hace el render. Lo que nos permitiría escalar nuestra API y nuestro servidor de render por separado según la demanda que tengan cada uno y nuestras necesidades.

Por último para terminar vamos a correr el script yarn deploy para iniciar el deploy a producción con now.sh, durante el despliegue a vamos obtener una URL, al acceder podemos ver como va el proceso de deploy donde se van a instalar nuestra dependencias, se va a correr build y luego start iniciando la aplicación y recargando la URL para mostrarnos nuestra página inicial.

Conclusiones

Como vemos hacer una aplicación con Next.js y React es muy fácil, sin necesidad de configurar nada podemos hacer literalmente cualquier tipo de aplicación, Next.js nos permite concentrarnos en nuestro código y no en configurar decenas de herramientas antes de empezar a programar para así poder desarrollar y lanzar a producción más rápido.

Para aprender más sobre Next.js puedes tomar el curso de Next.js de Platzi en el que tendrás la oportunidad de crear una aplicación.

SHARE

Oscar perez

Arquitecto especialista en gestion de proyectos si necesitas desarrollar algun proyecto en Bogota contactame en el 3006825874 o visita mi pagina en www.arquitectobogota.tk

• 
• 
• 
• 
•