Lo nuevo de Next 13

Hoy hablaremos sobre la versión 13 de Next JS, puedes leer este post o ver y escuchar esta información en formato de video en nuestro canal de youtube, te dejamos el link por si prefieres este formato. 😃 👍

---

El 25 de octubre del 2022 ha tenido lugar la Next Conf, en la que Vercel, startup creadora del framework Next JS, ha presentado las novedades de la versión 13.

Next JS es un framework de React compatible con typescript, que nos sirve para desarrollar aplicaciones web del lado del frontend; esto sin necesidad de realizar ninguna configuración, permitiéndonos construir aplicaciones con server-side-rendering y static-site-generation de una manera muy sencilla.

Y en el post de hoy hablaremos de las novedades que trae Next JS, primero hablaremos de dos pequeñas actualizaciones,

Next Js es caracterizado por tener componentes que ayudan a la optimización de nuestras aplicaciones, entre estos se encuentran componente Image y el componente Link:

Componente Image

El componente Image incluye por defecto optimizaciones, como lazy loading e imágenes optimizadas para diferentes tamaños de pantallas; y una encuesta realizada a la comunidad de Next, el 70% de los encuestados respondió que usa este componente en producción, ahora este componente ha sido actualizado y tiene algunas mejoras tales como:

• Menos carga del lado del cliente,
• Más fácil para estilizar y configurar, y
• Es más rápido que la versión anterior.

Componente Link

Continuando con el componente Link, este nos sirve para navegar entre páginas de nuestras aplicacionescomo lo haríamos en una Single Page Application, y entre sus funcionalidades está la precarga de las páginas de tu aplicación cuando el usuario hace hover en dicho link, la precarga hace que el cliente precargue las páginas a donde el usuario navegaría, para que las cargas sean mucho más rápidas, antes este Link tenía que tener como hijo a una etiqueta a; esto ha sido eliminado y ahora solo se tiene que definir este componente Link.

El siguiente gran cambio es el Router:

Router

Next Js, tiene la ventaja de que su Router está basado en el sistema de carpetas, con esto nos referimos a que las rutas no requieren de una configuración para poder funcionar, sino que con el simple hecho de colocar los componentes o ficheros que estén dentro de la carpeta “pages” actuarán como el sistema de rutas.

Ahora el nuevo Router tendrá que ser usado desde la carpeta app, esto no significa que él viajo router ha dejado de funcionar, en Next 13, este sigue coexistiendo por el momento con el nuevo por si necesitamos hacer progresivamente una migración.

Este nuevo router nos permitirá tener una carpeta, y dentro de esta los distintos componentes que vayamos a necesitar en distintos archivos, y cuenta con algunos especiales que podremos usar para representar nuestra UI:

• Page: Que será la página que queremos renderizar.
• Layout: Componentes de UI que serán compartidos entre varias páginas, la documentación dice que sin problema podremos tener layouts dentro de otros layouts.
• Loading: Componente que cargará automáticamente cuando tengamos un componente Suspense de React, cuando este termine de cargar, se reemplazará automáticamente.
• Error: Al igual que el componente loading, es uno que funcionará junto al componente de React ErrorBoundary, el cual desplegará el componente error cuando uno de estos ocurra.
• Template: Siendo opcional y similar a Layout con la diferencia que no guardará el estado de sus componentes hijos y los efectos serán reiniciados, este será como una recarga total cuando navegamos dentro de uno de estos componentes.
• Head: Es un archivo opcional para cambiar el contenido de la etiqueta head.

A la fecha de publicación de este post este se encuentra en beta, por lo que si quieres usarlo tendrás que añadir este a la configuración de next manualmente.

Hay un par de nuevos features que llegan con el nuevo router en app

Server components

Por defecto todos los componentes que estén dentro de la carpeta app serán cargados en el servidor, pero si tenemos otras necesidades diferentes al server-side-rendering tenemos la opción de que sean componentes que se rendericen en el cliente, tenemos que añadirle en la primera línea del componente con la directiva «use client»

La siguiente funcionalidad es la de streaming:

Streaming

Gracias a estas nuevas funcionalidades, nos permiten que el renderizado de la aplicación sea dinámico, teniendo partes independientes, cargando aquellas que no requieran más información y mostrando un estado de carga mientras terminan de cargarse los datos.

Ahora hablaremos del principal feature presentado durante la conferencia el cual es Turbopack

Turbopack

Vite se había vuelto una popular alternativa a webpack como empaquetador, esto ha resonado mucho en la comunidad debido a su rapidez en el proceso de construcción del proyecto.

Ahora Vercel ha presentado “Turbopack” y ya se encuentra disponible la versión alfa; este es el nuevo empaquetador que usa la versión 13 de Next Js, el cual está basado en Rust;

Se encuentra en la versión Alpha y promete ser 700 veces más rápido que webpack y 10 veces más rápido que Vite en el proceso de actualización de empaquetamiento, así como 4 veces más rápido en el proceso de arranque de empaquetamiento de webpack.

Esto puede ahorrarnos tiempo de manera bastante considerable entre cada recarga del servidor de desarrollo en comparación con Vite, Webpack o una versión anterior de Next JS

La gran limitación es que por el momento solo podemos usar turbopack con Next JS, por el otro lado webpack ha sido descargado más de 3 mil millones de veces, convirtiéndose en una de las herramientas más populares. ¿crees que turbopack se convierta en la nueva herramienta de empaquetamiento para el desarrollo web? ¿Y crees que con estas herramientas Webpack puede llegar a desaparecer?

Miremos cómo funciona con un proyecto con la instalación con create-next-app y el nuevo directorio funcionando:

Fuentes

Uno de los temas de rendimiento que tenemos al desarrollar una aplicación es la carga fuentes tipográficas, esta puede generar los siguientes efectos

• Podemos tener una fuente predeterminada por el navegador y después de un momento hay un pequeño parpadeo o layout shift en el que cambia el estilo de la fuente al que nosotros seleccionamos
• Si lo configuramos de forma diferente, podemos hacer que no cargue ninguna de las fuentes hasta que las que seleccionamos hayan sido descargadas
• O instalar alguna librería que optimice el uso de estas.

Lo nuevo de esta versión de Next es que tendremos un nuevo sistema para cargar fuentes, en el que estas se cargaran desde el servidor gracias al alojamiento de estas, así que evitamos hacer una petición para traerlas, eliminando el 99% de “layout shifts” y el 100% de “visual disruption”.

Podemos traer fuentes directamente desde Google fonts con esta API o podemos hacer uso de nuestras propias fuentes personalizadas, la diferencia es que se cargarán directamente en nuestro proyecto desde el principio evitando los problemas que conlleva de traer una fuente externa.

Las instalamos con el siguiente comando:

Y lo podemos usar de esta manera:

OG Image Generation

La última de las grandes funcionalidades es “Open Graph Image Generation”, en la cual se hizo énfasis de los beneficios de tener social cards en nuestras aplicaciones en relación con ventas e interacciones de los usuarios, con la librería @vercel/og podremos generar social cards estáticas, lo cual mencionan podrán ser hasta 5 veces más rápidas, convirtiendo CSS y HTML en imágenes a través de un componente. Ahora, esto sirve para poder generar imágenes estáticas a través de código, en estas imágenes se puede ver un ejemplo de cómo se utiliza y un ejemplo de “la vida real”.

¿Y a partir de cuándo puede usar esta nueva versión?, la versión 13 de Next está disponible desde su anuncio, algunas features todavía se espera a que lleguen a su versión final.

Aprende Next JS

Como lo hemos mencionado Next JS es un framework de React, y si te interesa aprender sobre estas dos tecnologías, te invitamos a tomar nuestro curso de React en el cual encontrarás además de los fundamentos de React y una sección dedicada a Next JS, da click aquí para ver el contenido del curso.

Te invitamos igualmente a revisar todo nuestro contenido en la Academia de Hola Mundo donde podrás formarte como un excelente desarrollador en diferentes tecnologías, has click aquí, donde podrás ver todos los cursos.

Por último, si te ha gustado no olvides golpear al botón de me gusta de este post!!, suscribirte a este blog y seguirnos en todas las redes como youtube, twitter e Instagram.

¡Hasta la próxima!, y chao mundo