BackVolver al blog

Next.js 9.4

Next.js 9.4 introduce React Fast Refresh, Regeneración Estática Incremental, nuevo soporte para variables de entorno, fetch integrado y más.

Hoy estamos emocionados de presentar Next.js 9.4, que incluye:

Fast Refresh

Fast Refresh es una nueva experiencia de recarga en caliente que te brinda retroalimentación instantánea sobre los cambios realizados en tus componentes React. Ahora está habilitado por defecto para todos los proyectos en Next.js 9.4 o superior.

La recarga en caliente ha existido por mucho tiempo pero históricamente ha sido demasiado frágil para habilitarla por defecto en tu flujo de trabajo. Debido a esto, Next.js implementó previamente una forma básica de recarga en caliente que restablecía todo el estado de tu aplicación.

La antigua implementación de recarga en caliente no era resistente a errores de compilación o tiempo de ejecución y realizaba una recarga completa de tu aplicación si cometías un error tipográfico al editar tu CSS o JavaScript. Esto no era óptimo e interrumpía tu línea de pensamiento.

Fast Refresh se integra profundamente en React mismo (a través de React Refresh), permitiendo que Next.js realice actualizaciones de precisión predecibles en tu árbol de componentes React.

Esto significa que Next.js solo actualizará el código en el archivo que editaste, y solo volverá a renderizar ese componente, sin perder el estado del componente. Esto incluye estilos (en línea, CSS-in-JS o módulos CSS/Sass), marcado, manejadores de eventos y efectos (a través de useEffect).

Una sesión de edición que muestra errores de compilación y tiempo de ejecución (con recuperación rápida), y ediciones que preservan el estado.

Como parte de esta experiencia, rediseñamos completamente el overlay de errores para que sea más útil y para que tu aplicación sea resistente a errores tipográficos o de tiempo de ejecución. Esto incluye, pero no se limita a:

  • Ubicaciones precisas de errores, resueltas a la línea y columna originales de tu código, antes de la compilación
  • Fragmentos de código fuente relevantes contextualmente, con la capacidad de hacer clic para abrir en tu editor
  • Reanudación de sesión de desarrollo después de corregir un error de sintaxis, sin perder el estado de la aplicación
  • Desaparición automática de errores no manejados en tiempo de ejecución cuando corriges el error

Nos gustaría agradecer a Dan Abramov por sus invaluables contribuciones y ayuda en la implementación de esta función.

Regeneración Estática Incremental (beta)

Next.js introdujo métodos de Generación de Sitios Estáticos en la versión 9.3 con un objetivo claro: deberíamos obtener los beneficios de lo estático (siempre rápido, siempre en línea, distribuido globalmente), pero con un excelente soporte para datos dinámicos, por lo que Next.js es conocido.

Para obtener lo mejor de ambos mundos, Next.js soporta Generación Estática Incremental, actualizando contenido estático después de que ya hayas construido tu sitio. Por ejemplo, en la versión 9.3 introdujimos la opción fallback: true en getStaticPaths, que te permite agregar nuevas páginas en tiempo de ejecución.

Recientemente creamos un ejemplo mostrando cómo Next.js puede pre-renderizar estáticamente un número infinito de páginas de esta manera.

Hoy, también presentamos Regeneración Estática Incremental (beta), que es un mecanismo para actualizar páginas existentes, volviéndolas a renderizar en segundo plano a medida que llega tráfico. Inspirado en stale-while-revalidate, esto garantiza que el tráfico se sirva sin interrupciones, siempre estáticamente, y la página recién construida se envía solo después de que termine de generarse.

pages/blog/[slug].js
export async function getStaticProps() {
  return {
    props: await getDataFromCMS(),
    // intentaremos regenerar la página:
    // - cuando llegue una solicitud
    // - como máximo una vez por segundo
    unstable_revalidate: 1,
  };
}

A diferencia de SSR, la Regeneración Estática Incremental garantiza que conserves los beneficios de lo estático:

  • Sin picos de latencia. Las páginas se sirven consistentemente rápido.
  • Las páginas nunca se desconectan. Si falla la regeneración de la página en segundo plano, la página antigua permanece sin cambios.
  • Baja carga en la base de datos y backend. Las páginas se recalculan como máximo una vez concurrentemente.

Ambas características incrementales (agregar páginas y actualizarlas de forma diferida), así como el modo de vista previa, ya son totalmente compatibles tanto con next start como con la plataforma edge de Vercel sin configuración adicional.

A continuación, trabajaremos en un RFC complementario para abordar dos capacidades adicionales de generación estática incremental:

  • Regenerar e invalidar múltiples páginas a la vez (como el índice de tu blog y una publicación de blog específica)
  • Regenerar escuchando eventos (como webhooks de CMS), antes del tráfico de usuarios

Ejemplos de CMS

Tras nuestro anuncio de generación de sitios estáticos de próxima generación, queríamos compartir escenarios reales de obtención de contenido desde APIs de CMS Headless y su renderizado como HTML en Next.js.

Nos asociamos con los creadores de algunos de los mejores sistemas CMS del mundo: Contentful, DatoCMS, Prismic, Sanity y TakeShape, con más por venir.

Estos ejemplos no solo están listos para usarse y son 100% de código abierto con licencia MIT, sino que incorporan las mejores prácticas disponibles:

DatoCMS logra resultados impecables gracias a su soporte integrado de optimización de imágenes.

DatoCMS logra resultados impecables gracias a su soporte integrado de optimización de imágenes.

También hemos colaborado con TinaCMS en una nueva dirección emocionante para los CMS: edición de contenido en la página. Consulta su guía para aprender cómo implementarlo en tu proyecto.

Nuevo soporte para variables de entorno

Un comentario común que recibimos de empresas que usan Next.js es que no estaba claro cuándo una variable de entorno se incluía en el paquete del navegador y cuándo solo estaba disponible en el entorno Node.js.

Hoy anunciamos dos características totalmente compatibles con versiones anteriores que ayudarán a simplificar este proceso.

Primero, ahora puedes prefijar la variable de entorno con NEXT_PUBLIC_ para exponerla al navegador. Cuando se use esa variable de entorno, se incluirá en el paquete JavaScript del navegador.

Ya no necesitas agregar un next.config.js y agregar la clave env para exponer estas variables.

pages/index.js
// La variable de entorno se expondrá al navegador
console.log('Versión de mi aplicación', process.env.NEXT_PUBLIC_VERSION);
 
export default function HomePage() {
  return <h1>Hola Mundo</h1>;
}

El segundo cambio es que Next.js ahora soporta la carga de .env por defecto. Permitiéndote definir fácilmente variables de entorno de desarrollo y producción.

Puedes leer más sobre la carga de .env en la documentación de Variables de Entorno.

Estas nuevas características simplificarán el uso de variables de entorno siguiendo estas convenciones:

  • Las variables de entorno solo están disponibles en el entorno Node.js por defecto
  • Las variables de entorno con prefijo NEXT_PUBLIC_ se exponen al navegador

Mejor soporte para fetch integrado

En Next.js 9.1.7 anunciamos el polyfill de la API fetch() en el navegador. Hoy este polyfill se ha extendido también al entorno Node.js.

En la práctica, ya no necesitas usar ningún tipo de polyfill de fetch del lado del servidor (por ejemplo isomorphic-unfetch o node-fetch) ya que Next.js proporcionará automáticamente fetch() en todos los entornos.

Por ejemplo, al usar getStaticProps, que se ejecuta usando Next.js en tiempo de compilación:

pages/blog.js
export async function getStaticProps() {
  // fetch ya no necesita importarse desde isomorphic-unfetch
  const res = await fetch('https://.../posts');
  const posts = await res.json();
 
  return {
    props: {
      posts,
    },
  };
}
 
function Blog({ posts }) {
  // Renderizar posts...
}
 
export default Blog;

Informes integrados de Web Vitals

La semana pasada el equipo de Google Chrome presentó Core Web Vitals. Core Web Vitals son las señales de calidad clave para ofrecer una gran UX en la web, sobre las cuales se construyen los famosos informes de Lighthouse.

Hacer un seguimiento de estas métricas es extremadamente útil si deseas que tu sitio web o aplicación web sea lo más rápido posible, que es uno de los objetivos principales de Next.js.

El equipo de Chrome ha lanzado una extensión de Chrome para Core Web Vitals que te permite como desarrollador obtener retroalimentación visual sobre el rendimiento de tus páginas.

Al construir aplicaciones web de producción, también deseas saber cómo funciona tu sitio para tus visitantes y (potenciales) clientes. Incluso podrías querer rastrear la mejora o regresión de estas métricas a lo largo del tiempo para ver si tus cambios tienen el impacto deseado en tu audiencia.

Para ayudar a informar Core Web Vitals a tu servicio de análisis, hemos introducido, en colaboración con Google, un nuevo método llamado reportWebVitals que se puede exportar desde pages/_app.js:

pages/_app.js
// Se llamará una vez por cada métrica que deba informarse.
export function reportWebVitals(metric) {
  // Estas métricas se pueden enviar a cualquier servicio de análisis
  console.log(metric);
}
 
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
 
export default MyApp;

Para usar este método en combinación con tu servicio de análisis, consulta la sección "Enviar resultados a Analytics" de la documentación. Si deseas aprender más sobre Core Web Vitals, puedes consultar web.dev/vitals.

Importaciones absolutas y alias

Si estás trabajando en un proyecto grande, algunas de tus declaraciones import podrían sufrir del espagueti ../../../:

import Button from '../../../../components/button';

En tales casos, en lugar de importaciones relativas, podríamos querer usar importaciones absolutas. Asumiendo que el directorio components existe en la raíz, podríamos querer que las declaraciones import se vean así:

import Button from 'components/button';

Nos complace anunciar que Next.js 9.4 hace que configurar importaciones absolutas sea muy simple tanto para proyectos JavaScript como TypeScript. Todo lo que necesitas hacer es agregar la configuración baseUrl a jsconfig.json (proyectos JS) o tsconfig.json (proyectos TS).

jsconfig.json / tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Esto permitirá importaciones absolutas desde . (el directorio raíz). También se integra con VSCode y otros editores, admitiendo navegación de código y otras características del editor.

Nota: Si anteriormente modificaste tu configuración de alias de módulos de Webpack para habilitar importaciones absolutas, esa configuración ahora puede eliminarse.

Además, Next.js 9.4 también soporta la opción paths, que te permite crear alias de módulos personalizados. Por ejemplo, lo siguiente te permite usar @/design-system en lugar de components/design-system:

jsconfig.json / tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/design-system/*": ["components/design-system/*"]
    }
  }
}

Luego puedes usar tu alias así:

// Importa 'components/design-system/button'
import Button from '@/design-system/button';

Debes especificar baseUrl si especificas paths. Puedes aprender más sobre la opción paths en la documentación de TypeScript.

Soporte configurable para Sass

Cuando se lanzó el soporte integrado para Sass en Next.js 9.3 recibimos comentarios de que un subconjunto de usuarios quería configurar el compilador de Sass. Por ejemplo para configurar includePaths.

Ahora esto es posible usando la clave sassOptions en next.config.js:

next.config.js
const path = require('path');
 
module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
};

Salida de logs mejorada

Hemos rediseñado la salida de línea de comandos para que sea más consistente y muestre menos datos duplicados como la URL de despliegue, esperando a que el servidor de desarrollo se inicie y más. También hemos cambiado el espaciado del tipo de mensaje para que sea consistente en todos los mensajes, lo que significa que ya no saltan de línea en línea.

Ejecutando next dev en versiones anteriores a 9.4

Ejecutando next dev en 9.4

Comunidad

Estamos emocionados de ver el crecimiento continuo en la adopción de Next.js:

  • Hemos tenido más de 1066 colaboradores independientes.
  • En GitHub, el proyecto ha recibido más de 48,000 estrellas.

Únete a la comunidad de Next.js en Discusiones de GitHub. Discusiones es un espacio comunitario que te permite conectarte con otros usuarios de Next.js y hacer preguntas.

Si estás usando Next.js, no dudes en compartir la URL de tu proyecto con la comunidad.

Estamos agradecidos con nuestra comunidad y todos los comentarios y contribuciones externas que ayudaron a dar forma a esta versión.