Novedades en Next.Js 10

Next.js 10 ha llegado, conoce todas las novedades que trae y como puede ayudarte a crear aplicaciones con las mejores prácticas y entérate de por que es el corazón de este blog.

Novedades en Next.Js 10

Llegó la versión 10 de next.js, siempre preocupados por mejorar han introducido nuevos features que mejorarán el rendimiento de las aplicaciones que utilizan next.js, además de sorpresas para el e-commerce que está creciendo día con día.

Componente Image

Un elemento que afecta al rendimiento de los sitios suelen ser las imágenes, la mayoría no están optimizadas y a veces se cargan imágenes de 1200px por 1200px en dispositivos que no muestran ni el 10% de ese tamaño, así que para que el manejo de imágenes sea más fácil el equipo de Next.js creo un nuevo componente next/image.

El equipo de Google Chrome ayudo en la creación de este, así que cuenta con las mejores prácticas y esta sumamente para el manejo de imágenes por ejemplo ayuda a mejorar el Largest Contentful Paint que mide cuanto tarda en cargar el contenido más grande del sitio, es un Core Web Vital que se tendrá en cuenta para el ranking de los sitios a la hora de las búsquedas en Google.

Además este nuevo componente también optimiza automáticamente las imágenes, genera tamaños más pequeños y funciona con cualquiera fuente de imagen, no importa si es de un CMS, funcionará. Las imágenes son optimizadas en el momento que se serán vistas, no desde la compilación así que olvida esos largos tiempos de compilación.

import Image from 'next/image'

<Image src="/leonidas-profile.png" width="320" height="320">

Analytics

Next presenta una nueva forma de medir los sitios que deja de lado mediciones emuladas para obtener datos reales de los usuarios de tu sitio, además de usar una medición constante para obtener datos más precisos, desde vercel puedes acceder ya mismo a estas métricas.

Fuente: https://nextjs.org/analytics.

Internacionalización

Este feature ayuda a dos puntos importantes traducciones y enrutamiento, ahora Next.js cuenta con detección de idiomas y enrutamiento que puedes configurar utlizando los identificadores internacionales UTS que son un estandár para este tipo de configuraciones, teniendo eso listo puedes configurar redirecciones o subrutas para mejorar la experencia del usuario según su ubicación. Conoce más en la documentación oficial.

Next Commerce

Un kit completo para comenzar en este mundo del e-commerce, next se junto con BigCommerce para crear este kit, ahora puedes usarlo y personalizarlo de manera sencilla desde aquí.

Fuente: https://demo.vercel.store/es.

Más features importantes son:

• Soporte de React 17: La nueva versión de React es 100% compatible con Next.js.
• Un nuevo CLI para la actualización de Next: @next/codemod.
• Importación de CSS de terceros en componentes de React: Ya se admite la importación que sea necesaria para usar los componentes de npm.
• Resolución automatica de href : Ya no es necesario usar la propiedad as en el componente next/link.
• Actualización rápida para MDX: Al momento de usar @next/mdx la actualización rápida ahora facilita hacer cambios sin recargar la página por completo.

Puedes conocer más de esta nueva versión aquí..

Este blog fue creado con Next

Así es, Next forma parte de nuestro stack y es nuestra manera favorita de trabajar con React por que nos ayuda a general el Server Side Rendering, para nuestras páginas estáticas y a traer toda la información necesaria para crear la página de un curso o una clase además de que nos ayuda a optimizar al máximo nuestros links y desde ayer nuestras imágenes gracias a los componentes next/link y next/image por que ¡Ya migramos a Next 10! 🥳.

Personalmente una mis características favoritas de Next es su routing sencillo, intuitivo y basado en una estructura de carpetas, que además nos permite acceder de una manera muy sencilla a los querys o el slug de este blog para pedirle al servidor la información que necesita.

La cereza del pastel es MDX. Cuando creas un blog utilizando MarkDown, un CMS o cualquier solución similar tienes dificultades al momento de querer implementar elementos especiales o estilos únicos pero con MDX puedes usar JSX y todo el poder de React dentro de MarkDown si lo necesitas para algo super personalizado dentro un post, de lo contrario funciona como el clásico y amigable MarkDown, ¿Te imaginas poder hacer todo lo que ya haces con React dentro de MarkDown?.

¿Sabías que también puedes crear tu API con next? ¿Quieres saber como hacerlo? ¿O te gustaría conocer nuestro stack a fondo? Suscríbete a nuestro newsletter para que no te pierdas ninguno de nuestros post.

Si quieres aprender como funciona el JavaScript que hay por detrás de Next y de React, las librerías que nos ayudan a crear el futuro, puedes comenzar con nuestro curso de JavaScript para React que te da el nivel para entender y ser un maestro de este lenguaje.