Next.js 7

Después de 26 versiones canarias y 3.4 millones de descargas, nos enorgullece presentar Next.js 7 listo para producción, que incluye:

• Mejoras en DX: 57% más rápido al iniciar, 42% más rápido en recompilación
• Mejor reporte de errores con react-error-overlay
• Pipeline de compilación actualizado: Webpack 4 y Babel 7
• Importaciones dinámicas estandarizadas
• Soporte para CDN estático
• Carga útil HTML inicial más pequeña
• Contexto de React con SSR entre App y Pages

Finalmente, estamos emocionados de compartir estas noticias en el nuevo nextjs.org

Mejoras en DX

Uno de los objetivos principales de Next.js es proporcionar el mejor rendimiento en producción con la mejor experiencia de desarrollador posible. Esta versión trae muchas mejoras significativas a los pipelines de construcción y depuración.

Velocidad de compilación

Gracias a webpack 4, Babel 7 y muchas mejoras y optimizaciones en nuestro código base, Next.js ahora se inicia hasta un 57% más rápido durante el desarrollo.

Gracias a nuestra nueva caché de compilación incremental, los cambios que realice en el código ahora se construyen un 40% más rápido.

Estos son algunos ejemplos de cifras que hemos recopilado:

Como beneficio adicional, durante el desarrollo y la construcción ahora verá una mejor retroalimentación en tiempo real gracias a webpackbar:

Mejor reporte de errores con React Error Overlay

Renderizar errores precisos y útiles es crítico para una gran experiencia de desarrollo y depuración. Hasta ahora, renderizábamos el mensaje de error y su traza de pila. A partir de ahora, utilizamos react-error-overlay para enriquecer la traza de pila con:

• Ubicaciones precisas de errores tanto para errores del servidor como del cliente
• Resaltados del código fuente para proporcionar contexto
• Una traza de pila completa y detallada

Esta es una comparación de nuestros errores antes y después:

El overlay anterior a la izquierda, react-error-overlay a la derecha

Como beneficio adicional, react-error-overlay facilita abrir su editor de texto simplemente haciendo clic en un bloque de código específico.

Webpack 4

Desde su primera versión, Next.js ha sido impulsado por webpack para agrupar su código y reutilizar el rico ecosistema de plugins y extensiones. Nos complace anunciar que Next.js ahora está impulsado por la última versión de webpack 4, que viene con numerosas mejoras y correcciones de errores.

Entre estas obtenemos:

• Soporte para archivos fuente .mjs
• Mejoras en la división de código
• Mejor soporte para tree-shaking (eliminación de código no utilizado)

Otra nueva característica es el soporte para WebAssembly, Next.js incluso puede renderizar WebAssembly en el servidor, aquí hay un ejemplo.

Nota: esta actualización es totalmente compatible con versiones anteriores. Sin embargo, si está utilizando loaders o plugins personalizados de webpack a través de next.config.js, es posible que deba actualizarlos.

Importaciones CSS

Con webpack 4, se introdujo una nueva forma de extraer CSS de los paquetes, llamada mini-extract-css-plugin.

@zeit/next-css, @zeit/next-less, @zeit/next-sass, y @zeit/next-stylus ahora están impulsados por mini-extract-css-plugin.

La nueva versión de estos plugins de Next.js resuelve 20 problemas existentes relacionados con importaciones CSS; Como ejemplo, ahora se admite la importación de CSS en import() dinámicos:

import './my-dynamic-component.css';
 
export default function MyDynamicComponent() {
  return <h1>Mi componente dinámico</h1>;
}

import dynamic from 'next/dynamic'
 
const MyDynamicComponent = dynamic(import('../components/my-dynamic-component'))
 
export default function Index() {
  return () {
    <div>
      <MyDynamicComponent/>
    </div>
  }
}

Una mejora importante es que ya no es necesario agregar lo siguiente a pages/_document.js:

<link rel="stylesheet" href="/_next/static/style.css" />

En su lugar, Next.js inyecta automáticamente el archivo CSS. En producción, Next.js también agrega automáticamente un hash de contenido a la URL del CSS, para que si hay cambios, se asegure de que sus usuarios finales nunca obtengan versiones obsoletas del archivo y tengan la capacidad de introducir caché permanente inmutable.

En resumen, todo lo que tiene que hacer para admitir la importación de archivos .css en su proyecto Next.js es simplemente registrar el plugin withCSS en su next.config.js:

const withCSS = require('@zeit/next-css');
module.exports = withCSS({
  /* mi configuración next */
});

Importaciones dinámicas estandarizadas

Next.js ha tenido soporte para importaciones dinámicas a través de next/dynamic desde la Versión 3.

Como primeros adoptadores de esta tecnología, tuvimos que escribir nuestra propia solución para manejar import().

Como consecuencia, Next.js comenzó a divergir del soporte que webpack introdujo más tarde para ello y faltaban algunas características.

Debido a esto, Next.js no admitía algunas características de import() que webpack ha introducido desde entonces.

Por ejemplo, no era posible nombrar y agrupar manualmente ciertos archivos juntos:

import(/* webpackChunkName: 'my-chunk' */ '../lib/my-library');

Otro ejemplo es usar import() sin estar envuelto en el módulo next/dynamic.

A partir de Next.js 7 ya no modificamos el comportamiento predeterminado de import(). Esto significa que obtiene soporte completo para import() listo para usar.

Este cambio también es totalmente compatible con versiones anteriores. Hacer uso de un componente dinámico sigue siendo tan simple como:

import dynamic from 'next/dynamic';
 
const MyComponent = dynamic(import('../components/my-component'));
 
export default function Index() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

Lo que hace este ejemplo es crear un nuevo archivo JavaScript para my-component y solo cargarlo cuando se renderiza <MyComponent />.

Lo más importante es que si no se renderiza, la etiqueta <script> no se incluye en la carga útil HTML inicial.

Para simplificar aún más nuestra base de código y hacer uso del excelente ecosistema de React, en Next.js 7 next/dynamic se reescribió para usar react-loadable detrás de escena (con algunas modificaciones menores). Esto también introduce dos grandes nuevas características para componentes dinámicos:

• Tiempos de espera usando la opción timeout en next/dynamic
• Un retraso en el componente de carga, usando la opción delay en next/dynamic. Este retraso permite que su componente loading espere x tiempo antes de renderizar el estado de carga, por ejemplo, si la importación es muy rápida.

Babel 7

Next.js 6 introdujo Babel 7 mientras todavía estaba en beta. Desde entonces se ha lanzado la versión estable de Babel 7, y Next.js 7 ahora usa esta versión.

Para una lista completa de cambios, puede consultar las notas de lanzamiento de Babel.

Algunas de las características principales son:

• Soporte para Typescript, para Next.js puede usar @zeit/next-typescript
• Soporte para sintaxis de fragmentos <>
• Soporte para babel.config.js
• Propiedad overrides para aplicar presets/plugins solo a un subconjunto de archivos o directorios

Si no tiene una configuración personalizada de Babel en su proyecto Next.js, no hay cambios importantes.

Sin embargo, si tiene una configuración personalizada de Babel, debe actualizar los respectivos plugins/presets personalizados a su última versión.

En caso de que esté actualizando desde una versión anterior a Next.js 6, puede ejecutar la excelente herramienta babel-upgrade.

Además de actualizar a Babel 7, el preset de Babel de Next.js (next/babel) ahora establece por defecto la opción modules a commonjs cuando NODE_ENV está configurado como test.

Esta opción de configuración a menudo era la única razón para crear un .babelrc personalizado en un proyecto Next.js:

{
  "env": {
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    },
    "test": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
    }
  }
}

Con Next.js 7 esto se convierte en:

{
  "presets": ["next/babel"]
}

En este punto, el .babelrc se puede eliminar, ya que Next.js usará automáticamente next/babel cuando no haya configuración de Babel.

Carga útil HTML inicial más pequeña

Como Next.js pre-renderiza HTML, envuelve las páginas en una estructura predeterminada con <html>, <head>, <body> y los archivos JavaScript necesarios para renderizar la página.

Esta carga útil inicial era anteriormente de alrededor de 1.62kB. Con Next.js 7 hemos optimizado la carga útil HTML inicial, ahora es de 1.5kB, una reducción del 7.4%, haciendo que sus páginas sean más ligeras.

Las principales formas en que hemos reducido el tamaño son:

• Se eliminó el div __next-error
• Los scripts en línea están minificados, en una futura versión se eliminarán por completo
• Se compilaron propiedades no utilizadas de __NEXT_DATA__ cuando no se usan, por ejemplo, las propiedades nextExport y assetPrefix.

Soporte para CDN estático

En Next.js 5 introdujimos soporte para assetPrefix, una forma de hacer que Next.js cargue automáticamente activos desde una ubicación determinada, generalmente un CDN. Esta opción funciona muy bien si su CDN admite proxy, solicita una URL como

https://cdn.example.com/_next/static/<buildid>/pages/index.js

Normalmente, el CDN verifica si tiene el archivo en su caché o, de lo contrario, lo solicita directamente desde el origen.

El proxy de activos es precisamente cómo funciona la Edge Network.

Sin embargo, algunas soluciones requieren cargar previamente un directorio directamente en el CDN. El problema al hacer esto es que la estructura de URL de Next.js no coincidía con la estructura de carpetas dentro de la carpeta .next. Por ejemplo, nuestro ejemplo anterior

https://cdn.example.com/_next/static/<buildid>/pages/index.js
// mapeado a:
.next/page/index.js

Con Next.js 7 hemos cambiado la estructura de directorios de .next para que coincida con la estructura de URL:

https://cdn.example.com/_next/static/<buildid>/pages/index.js
// mapeado a:
.next/static/<buildid>/pages/index.js

Si bien recomendamos usar el tipo de proxy de CDN, esta nueva estructura permite a los usuarios de un tipo diferente de CDN cargar el directorio .next en su CDN.

Styled JSX v3

Nos complace presentar styled-jsx 3, la solución CSS-in-JS incluida por defecto en Next.js ahora está lista para React Suspense.

Una cosa que a menudo no estaba clara era cómo diseñar un componente hijo si ese componente no es parte del alcance del componente actual, por ejemplo, si incluía un componente hijo que necesitaba estilos específicos solo cuando se usaba dentro del componente padre:

const ChildComponent = () => (
  <div>
    <p>algún texto</p>
  </div>
);
 
export default function Index() {
  return (
    <div>
      <ChildComponent />
      <style jsx>{`
        p {
          color: black;
        }
      `}</style>
    </div>
  );
}

El código anterior intenta seleccionar la etiqueta p pero no funciona porque los estilos de styled-jsx están limitados al componente actual, no se filtran a los componentes hijos. Una forma de solucionar esto era usar el método :global, eliminando el prefijo de la etiqueta p. Sin embargo, esto introduce un nuevo problema, que es que los estilos se filtran por toda la página.

En styled-jsx 3 este problema se ha resuelto introduciendo una nueva API, css.resolve, que generará el className y las etiquetas <style> (la propiedad styles) para la cadena styled-jsx dada:

import css from 'styled-jsx/css';
 
const ChildComponent = ({ className }) => (
  <div>
    <p className={className}>algún texto</p>
  </div>
);
 
const { className, styles } = css.resolve`
  p {
    color: black;
  }
`;
 
export default function Index() {
  return (
    <div>
      <ChildComponent className={className} />
      {styles}
    </div>
  );
}

Esta nueva API permite pasar estilos personalizados de manera transparente a los componentes hijos.

Dado que esta es una versión importante para styled-jsx, hay un cambio importante que mejora el tamaño de los paquetes si está usando styles-jsx/css. En styled-jsx 2 generábamos una versión "con alcance" y "global" de estilos externos, incluso cuando solo se usaba la versión "con alcance" todavía incluíamos la versión "global" de esos estilos externos.

Con styled-jsx 3, los estilos globales deben etiquetarse con css.global en lugar de css, para que styled-jsx pueda optimizar el tamaño del paquete.

Para todos los cambios, consulte las notas de lanzamiento.

Contexto de React con SSR entre App y Pages

A partir de Next.js 7 ahora admitimos la nueva API de contexto de React entre pages/_app.js y los componentes de página.

Anteriormente no era posible usar el contexto de React entre páginas en el lado del servidor. La razón de esto era que webpack mantiene un caché de módulo interno en lugar de usar require.cache, hemos escrito un plugin personalizado de webpack que cambia este comportamiento para compartir instancias de módulo entre páginas.

Al hacerlo, no solo permitimos el uso del nuevo contexto de React, sino que también reducimos la huella de memoria de Next.js al compartir código entre páginas.

nextjs.org

Junto con el lanzamiento de Next.js 7, estamos lanzando un nextjs.org completamente rediseñado.

Blog

La entrada del blog que está leyendo actualmente ya es parte de la nueva sección de blog en nextjs.org. Este blog será el nuevo hogar para la comunicación relacionada con Next.js, por ejemplo, anuncios de nuevas versiones.

El nuevo nextjs.org

Inspírese

A medida que la cantidad de aplicaciones que usan Next.js sigue creciendo, necesitábamos una forma de mostrar todas estas hermosas aplicaciones en una sola vista. Conozca la nueva página /showcase:

Inspírese en nextjs.org/showcase

Este nuevo escaparate nos permite agregar continuamente nuevas aplicaciones construidas con Next.js.

¡Lo invitamos a visitar /showcase para inspirarse o a enviar su propia aplicación que use Next.js!

Comunidad

Desde su primer lanzamiento, Next.js ha sido utilizado en todo, desde empresas Fortune 500 hasta blogs personales. Estamos muy emocionados de ver el crecimiento en la adopción de Next.js.

• Actualmente, hay más de 12,500 dominios públicos indexados que usan Next.js.
• Hemos tenido más de 500 colaboradores que han realizado al menos 1 commit.
• En GitHub, el proyecto ha recibido más de 29,000 estrellas.
• Casi 2200 pull requests han sido enviados desde el primer lanzamiento.

La comunidad de Next.js tiene casi 2000 miembros. ¡Únase a nosotros!