Next.js 8.0.4

Nos complace presentar la versión lista para producción de Next.js 8.0.4:

• Mejoras en el rendimiento de construcción
• Construcciones determinísticas
• Tiempo de ejecución cliente más pequeño
• Funciones serverless más pequeñas
• Etiqueta viewport predeterminada
• Mejoras en la guía de aprendizaje

Como siempre, nos hemos esforzado por garantizar que todos estos beneficios sean completamente compatibles con versiones anteriores. Para la mayoría de las aplicaciones Next.js, solo necesita ejecutar:

npm i next@latest react@latest react-dom@latest

Rendimiento de Construcción

Las construcciones de Next.js ahora son más determinísticas, lo que significa que si el código no cambia, el resultado de la construcción sería el mismo cada vez.

Esto permite que más trabajo realizado por el proceso de construcción pueda almacenarse en caché, lo que resulta en reconstrucciones más rápidas del código de producción después de la primera construcción.

Nuestras mediciones revelaron que una cantidad significativa del tiempo de construcción se dedica a la minificación de JavaScript. Como el resultado de la construcción ahora es más determinístico, las posibilidades de que el archivo minificado ya esté en la caché son mayores.

Los usuarios que implementen en Vercel experimentarán estas mejoras de caché automáticamente.

Hemos simplificado nuestro manifiesto del lado del servidor next/dynamic para incluir solo módulos que se cargan de forma asíncrona. Este manifiesto simplificado es más rápido de calcular y produce menos JavaScript.

Los usuarios de CircleCI deberían notar tiempos de construcción más rápidos. Anteriormente, los trabajadores se programaban en exceso debido a que el entorno de CircleCI no reflejaba con precisión la cantidad de CPUs disponibles. Next.js ahora detecta CircleCI y establece un número apropiado de CPUs basado en los recursos disponibles.

Menor Huella de Tiempo de Ejecución

Next.js ahora genera 5.58KB menos de JavaScript del lado del cliente y tiene una carga útil HTTP más pequeña que la versión anterior.

withRouter ya no depende de hoist-non-react-statics, reduciendo el tamaño del paquete en 3KB. withRouter seguirá elevando getInitialProps, pero no otras propiedades estáticas.

El preset next/babel ha sido optimizado para producir JavaScript más ligero y rápido.

Se ha eliminado el encabezado X-Powered-By, reduciendo el tamaño de la carga útil HTTP. Encuestamos a la comunidad y encontramos que el encabezado a menudo se deshabilitaba en producción, por lo que decidimos eliminarlo. Esto también significa que la opción poweredByHeader puede eliminarse de su next.config.js si estaba habilitada en su proyecto.

Hemos realizado muchas optimizaciones en el árbol de dependencias de Next.js y en la base de código general, lo que nos permitió hacer que cada Función Serverless sea 44KB (5.44KB gzip) más pequeña.

El tamaño de las Funciones Serverless afecta directamente el rendimiento de arranque Serverless, funciones más pequeñas significan un arranque más rápido.

Después del lanzamiento de Next.js 8, recibimos informes de un pequeño número de usuarios que tenían problemas al importar componentes React fuera de Next.js, por ejemplo, en su suite de pruebas. Esto fue causado por importaciones a next que se reescribían al archivo correcto dentro de la base de código de Next.js, sin embargo, esta optimización se aplicaba para todos los usuarios del preset next/babel. La optimización se ha movido al proceso de construcción de Next.js, por lo que ya no entrará en conflicto con las configuraciones babel de los usuarios.

Etiqueta Meta Viewport Predeterminada

Uno de los objetivos de Next.js es proporcionar los valores predeterminados más adecuados para escribir aplicaciones web. En un esfuerzo por reducir la cantidad de configuración necesaria al implementar consultas de medios CSS en Next.js.

Por defecto, los navegadores no manejan las consultas CSS @media y el zoom de la manera que se esperaría que funcionaran, lo que puede llevar a inconsistencias inesperadas al escribir consultas CSS @media.

En casi todos los casos, los usuarios de Next.js agregarían una etiqueta meta viewport a su aplicación para resolver estas inconsistencias.

A partir de la versión 8.0.4, esta etiqueta viewport ya no es necesaria en la mayoría de los casos. Si la viewport no está configurada por la aplicación, se aplicará una vista predeterminada:

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1,initial-scale=1"
/>

La etiqueta viewport aún puede sobrescribirse usando next/head:

import Head from 'next/head';
 
function HomePage() {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=0.5,initial-scale=1"
        />
      </Head>
    </>
  );
}
 
export default HomePage;

Gracias a Jason Miller por colaborar e implementar este cambio.

Nuevo Plugin @next/mdx

MDX le permite escribir JSX dentro de sus documentos Markdown. Puede usar la sintaxis regular de markdown para escribir contenido e importar componentes React para mejorar el documento con contenido interactivo y dinámico.

El plugin que proporciona soporte para MDX en Next.js, @zeit/next-mdx, se ha movido al repositorio GitHub de Next.js y ahora está disponible como @next/mdx.

Instalación:

npm i @next/mdx @mdx-js/loader

Para hacerlo disponible en su aplicación Next.js, cree un archivo next.config.js e incluya:

const withMDX = require('@next/mdx')();
module.exports = withMDX();

Con el tiempo, más plugins de Next.js se moverán al repositorio de Next.js para que se lancen junto con el núcleo de Next.js y sean probados por el conjunto de pruebas de Next.js. De esta manera podemos garantizar que la sustitución de módulos en caliente, la construcción de producción y otras características funcionen bien con los plugins.

Mejoras en la Guía de Aprendizaje

Next.js Learn es una guía paso a paso para aprender Next.js, completa con cuestionarios y ejemplos.

El sitio web ha sido reconstruido recientemente usando MDX, lo que hace que contribuir sea más fácil que nunca. ¡Damos la bienvenida a cualquiera que desee contribuir al sitio web de aprendizaje!

El sitio web también se ha actualizado para usar el objetivo serverless de Next.js, que se introdujo en Next.js 8, asegurando que el sitio web escale y sea rápido para usuarios en todo el mundo.

Recibimos muchos comentarios de la comunidad sobre mejoras en el contenido, y hemos estado actuando en consecuencia durante las últimas semanas. Next.js Learn ahora tiene ejemplos actualizados y más detalles en cada sección para hacer que las instrucciones sean más fáciles de entender.

El Sitio Web de Next.js Learn

Contribuciones

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

• Hemos tenido más de 660 contribuyentes.
• En GitHub, el proyecto ha sido marcado con estrella más de 36,150 veces.
• Se han enviado más de 2,950 pull requests desde el primer lanzamiento.

Nos gustaría agradecer a todos los que han contribuido a este lanzamiento de Next.js. Ya sea contribuyendo al núcleo o expandiendo y mejorando nuestro creciente directorio de ejemplos, apreciamos todas las contribuciones.

Si está buscando comenzar a contribuir a Next.js, los problemas con las etiquetas good first issue o help wanted son un buen lugar para comenzar.

Comunidad

La comunidad de Next.js ha crecido a más de 6,000 miembros.

Las discusiones de GitHub son un lugar donde puede hablar sobre Next.js, obtener consejos sobre cómo resolver problemas y ayudar a otros miembros de la comunidad con su conocimiento de Next.js.

¡Únase a la comunidad en GitHub!