Next.js 10.1

Estamos emocionados de presentar Next.js 10.1, que incluye:

• Recargas 3x más rápidas: 200ms más rápido sin necesidad de cambios.
• Tiempo de instalación mejorado: 58% menos tamaño de instalación y 56% menos dependencias.
• Mejoras en next/image: Soporte para Apple Silicon (M1), más opciones de diseño y cargadores.
• Integración de Next.js Commerce con Shopify: Capa de datos flexible para aplicaciones de comercio electrónico componibles.
• Página 500 personalizada: Añade tu logo y marca a las páginas de error.
• Carga estricta de configuración PostCSS: Mejor caché con Webpack 5.
• Soporte para extends en tsconfig.json: Configuración extensible para aplicaciones TypeScript grandes.
• Detectar cuando el modo de vista previa está activado: Mostrar contenido condicionalmente en vistas previas.
• Métodos del enrutador para scroll al inicio: Scroll automático al inicio, ahora consistente para todo el enrutamiento.
• Mejoras en la documentación: Adopción incremental, migración y despliegue con Docker.

Recargas 3x más rápidas

Desde v9.4, Next.js incorporó el Fast Refresh de Facebook al código abierto para obtener retroalimentación instantánea en ediciones de componentes React.

Esto significa que Next.js solo actualiza el código en el archivo editado y solo vuelve a renderizar ese componente, sin perder el estado. Incluye estilos (en línea, CSS-in-JS o módulos CSS/Sass), marcado, manejadores de eventos y efectos (vía useEffect).

Ahora lo hacemos 200ms más rápido en cada edición sin cambios en tu código. En promedio, esto hace que Fast Refresh sea 3 veces más rápido.

¿Quieres aún más rendimiento y mejores tiempos de compilación? Activa Webpack 5 hoy con una nueva bandera future. Esta bandera es una versión candidata (RC) y Webpack 5 será el predeterminado pronto. Después de activarla, comparte tus comentarios.

module.exports = {
  future: {
    webpack5: true,
  },
};

Para más información sobre cómo Webpack 5 se implementa de manera compatible, consulta la documentación.

Tiempo de instalación mejorado

Optimizamos el gráfico de dependencias de Next.js para reducir el tiempo de instalación y el tamaño. Ahora es más rápido que nunca crear un proyecto Next.js, localmente y en CI/CD.

Como parte de nuestra optimización, actualizamos paquetes npm marcados como obsoletos. Una instalación fresca de Next.js 10.1 ahora no genera advertencias.

Mejoras en next/image

Soporte para Apple Silicon

La optimización de imágenes ahora usa WebAssembly, reduciendo el tamaño de instalación en ~30MB y añadiendo soporte para Apple Silicon M1.

Diseños adicionales

Nuevas opciones para next/image:

• layout=fill: No requiere width y height. (Demo)
• layout=fixed: Comportamiento nativo de img. (Demo)
• layout=responsive: Ancho flexible con relación de aspecto fija. (Demo)
• layout=intrinsic: No crece, pero puede encoger. (Demo)
• objectFit=cover: Imágenes de fondo. (Demo)

Más información en la documentación de layout.

Mejor soporte para optimización

Ahora puedes usar cualquier proveedor de imágenes con el prop loader:

import Image from 'next/image';
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
};

Más información en la documentación de next/image.

Integración de Next.js Commerce con Shopify

Next.js Commerce ahora tiene una UI agnóstica de proveedor, permitiendo integrar cualquier solución headless. Cambiar entre proveedores es un cambio de una línea.

Métricas Lighthouse para Next.js Commerce globalmente.

Prueba nuestro Demo de Shopify. Más proveedores próximamente.

Página 500 personalizada

Ahora puedes crear un pages/500.js personalizado:

export default function Custom500() {
  return <h1>500 - Error del servidor</h1>;
}

Carga estricta de configuración PostCSS

Mejora el rendimiento con Webpack 5:

module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  },
};

Más información en la documentación de PostCSS.

Soporte para extends en tsconfig.json

Ahora puedes extender configuraciones TypeScript:

{
  "extends": "./tsconfig.base.json"
}

Más información en la documentación de TypeScript.

Detectar modo de vista previa

Detecta cuándo el modo de vista previa está activo:

import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>Modo de vista previa activado</h1> : null}</>;
}

Más información en la documentación del modo de vista previa.

Métodos del enrutador para scroll al inicio

router.push y router.replace ahora también hacen scroll al inicio. Puedes desactivarlo con la opción scroll.

Más información en la documentación de next/router.

Mejoras en la documentación

Nuevas guías añadidas:

• Adopción incremental de Next.js
• Migración desde Gatsby
• Migración desde Create React App
• Migración desde React Router
• Autenticación
• Despliegue con Docker

Comunidad

Next.js sigue creciendo:

• 1,540 contribuidores independientes (+240 desde 10.0)
• 64,950 estrellas en GitHub.

Únete a la comunidad en GitHub Discussions o Next.js Discord.

Créditos

Agradecemos a todos los contribuidores que hicieron posible esta versión.

(Lista completa de contribuidores conservada igual)