Next.js es un marco React para la representación del lado del servidor, que sus creadores lo presentan como una cadena de herramientas de comando único de configuración cero para aplicaciones React.
Este marco proporciona una estructura común que le permite crear fácilmente una aplicación front-end React y gestiona de forma transparente el renderizado del lado del servidor. La versión 9.3 de Next.js se lanzó el lunes con nuevas características y algunas mejoras, de las cuales podremos encontrar como principal novedad la capacidad de poder generar sitios estáticos.
¿Qué hay de nuevo en Next.js 9.3?
Con el lanzamiento de Next.js 9.0, el marco introdujo el concepto de optimización automática estática. Cuando una página no tiene requisitos de bloqueo de recuperación de datos como getInitialProps, se representará automáticamente en HTML una vez que se haya construido.
Hay otros casos en los que es posible que desee hacer una página en HTML estático en el momento de la compilación, incluso con el bloqueo de los requisitos de extracción de datos. Este es el caso, por ejemplo, de páginas de marketing alimentadas por un sistema de gestión de contenido (CMS).
Next.js 9.3 presenta dos nuevos métodos de recuperación de datos: getStaticProps y getServerSideProps.
Estos nuevos métodos tienen muchas ventajas sobre el modelo getInitialProps, ya que existe una clara distinción entre lo que se convertirá en SSG (Static Side Generation) y SSR (Server Side Rendering). Son adiciones de API.
Todas las nuevas características son compatibles con versiones anteriores y se pueden adoptar gradualmente. No hay depreciación y getInitialProps continúa funcionando normalmente. Se ha agregado un parámetro getStaticPaths para obtener el enrutamiento dinámico.
- getStaticProps: permite obtener datos durante la construcción;
- getStaticPaths: permite especificar enrutamiento dinámico basado en datos;
- getServerSideProps: permite obtener datos para cada solicitud.
Otro cambio que se destaca de esta nueva versión es el soporte para el modo de vista previa. La introducción de getStaticProps en Next.js abre nuevas posibilidades, como el uso de las capacidades de representación de Next.js bajo demanda bajo ciertas condiciones.
Por ejemplo, al obtener una vista previa de un borrador en un CMS, deseará omitir la representación estática y renderizar la página a pedido con el contenido del borrador en lugar del contenido publicado. Desea que Next.js omita la generación estática solo en este caso específico. Según el equipo de Next.js, el modo de vista previa le permite hacer esto.
El modo de vista previa permite a los usuarios omitir la página generada estáticamente para devolver a solicitud (SSR) un borrador de página, por ejemplo, de un CMS. Sin embargo, no está limitado a ciertos sistemas CMS. El modo de vista previa se integra directamente con getStaticProps y getServerSideProps para que pueda usarse con cualquier tipo de solución de recuperación de datos.
Next.js 9.2 agregó soporte para CSS incorporado, pero Next.js 9.3 agregó soporte para Sass. Se admiten hojas de estilo globales y módulos CSS, así como CSS incorporado. Next.js ahora admite módulos CSS con archivos Sass utilizando la convención de nomenclatura de archivos [nombre].module.scss. A diferencia del soporte previamente disponible en Next.js 5+ con next-sass, los módulos globales Sass y CSS ahora pueden coexistir.
Los módulos CSS permiten administrar Sass localmente creando automáticamente nombres de clase únicos.
Con la versión 9.0 de Next.js, había una página que no se representaba automáticamente en HTML estático: página 404.
La razón principal detrás de esto es que la página de error que alimenta el 404 se manejó más que el 404. Por ejemplo, también manejó errores. Dado que las páginas 404 se representan para rutas inexistentes, la representación de la página a pedido podría generar mayores costos y una mayor carga del servidor. La versión 9.3 del marco mejora las cosas y ofrece una optimización estática automática para 404 páginas.
Ahora, cuando su solicitud no incluye una página personalizada error.js, el archivo Next.js genera automáticamente la página 404 de forma estática y la utiliza cuando se debe servir un 404. Esto sucede automáticamente y no se requieren cambios.
También puedes personalizar esta página. Para reemplazar la página 404 predeterminada, se puede crear un archivo de páginas 404.js.
Si quieres conocer más al respecto, puedes consultar el siguiente enlace.