Do you want to switch to Platzi in English?
19

Next.js, el futuro de las aplicaciones con React

20657Puntos

hace 2 años

Curso de Next.js
Curso de Next.js

Curso de Next.js

Con el curso de Next.js podrás optimizar el enrutamiento, el server side rendering y estilos de cualquier aplicación basada en react.js, todo desde la mismo framework. Dominar Next.js te permite crear Single Page Apps, Progressive Web Apps y cualquier aplicación con todas las posibilidades de react.js, además de agregar librerias.

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).

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 (elquesea) 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';

functionHomePage() {
	return (
		<main><h1>Página principalh1><Linkhref="/about"><a>Ir a <em>/aboutem>a>
			Link>
			<stylejsx>{`
				h1 { color: red; }
			`}style>
		main>
	);
}

exportdefault 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';

classAboutPageextendsComponent{
	staticasync getInitialProps() {
		return { name: 'Platzi' };
	}

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

exportdefault 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, regístrate en el Diplomado de Desarrollo de Aplicaciones con React.JS en el que tendrás la oportunidad de crear una aplicación con mentoría personalizada.

Curso de Next.js
Curso de Next.js

Curso de Next.js

Con el curso de Next.js podrás optimizar el enrutamiento, el server side rendering y estilos de cualquier aplicación basada en react.js, todo desde la mismo framework. Dominar Next.js te permite crear Single Page Apps, Progressive Web Apps y cualquier aplicación con todas las posibilidades de react.js, además de agregar librerias.
Sergio Daniel
Sergio Daniel
@sergiodxa

20657Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
11477Puntos

Muy buen proyecto. Gracias por la buena Intro @sergiodxa!

“Inspirado por la facilidad de uso de PHP, y beneficiándose del sistema de módulos de JavaScript”

Good.

1
1227Puntos
2 meses

Así es @cvander

2
1767Puntos

Excelente articulo! por cierto hay un error de tipeo “yard” en vez de “yarn”

yard addnext react react-dom && yarn add -D now

Saludos.

1
20657Puntos
2 años

Ya lo arreglamos, gracias por avisar 😄

2
835Puntos

Me encanto el articulo, muchas gracias por la explicación de nex 2.20 😃

1
5418Puntos

Excelente framework de React JS, es muy fácil y sencillo de usar; A Colo, Leonidas y a todo el Team Platzi muchas gracias por los conocimientos compartidos en el Diplomado, Ojala sigan haciendo muchos para seguir asistiendo a todos.

1
501Puntos

Le verdad sergio muy bien explicado. Una masa. Saludos

0
439Puntos

Se ve super interesante, a probarlo pronto…

0
7864Puntos

Explicaran esto en algún próximo vídeo que agreguen al curso de react o algo así? para los que no pudimos asistir al diplomado

1
20657Puntos
2 años

En el curso de React hay un material sobre Next v1, la mayor diferencia es como usar CSS.

0
789Puntos

Hola Sergio, gracias por la guía rápida 😄

Cómo hago para que no salga ese mensaje de error? supuestamente PropTypes ya no se usa pero tampoco el código lo está usando… o next es quien lo usa?

PD. también quisiera saber sobre esos fetch… qué es lo que están escuchando?

Saludos y gracias!

1
20657Puntos
2 años

Next.js esta usando PropTypes internamente, seguro va a pasar con muchos componentes que se descargan de npm que mientras no se actualicen van a seguir dando ese error.

0

Hola, como le hago para cambiar el puerto en el que lanza la app. ya que mi puerto 3000 esta ocupado.

0
2 años

Ya lo resolvi, aunque creo que deberia haber alguna ora forma, fui a node_modules/next/dist/bin y alli en dev y start especifica el puerto 3000, cambiar eso y listo.

1
20657Puntos
2 años

Simplemente corré next -p 3000 o next start -p 3000. Te recomiendo dejar estas dudas en el curso de React donde seguro conseguís respuesta más rápido 😃

0

Para hacer una aplicación con react, es preferible usar next.js o Laravel? Laravel ya lo se usar, pero nunca trabajé con react.

0
27343Puntos

Buen artículo Sergio, aclara muchas dudas iniciales sobre Next.js … y despierta la curiosidad …

0
1259Puntos

Muy buena info, gracias por compartirla.