Next.js 5.1: Resolución de páginas más rápida, configuración de entorno y más

Nos complace presentar Next.js 5.1, que incluye soporte para configuración de entorno, fases, mapas de fuente y nuevos plugins de Next.js.

Se introdujeron importantes mejoras de rendimiento: la resolución de páginas es 102 veces más rápida y las páginas de error se cargan de manera más eficiente.

Para actualizar o instalar, ejecuta:

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

Además de actualizar Next.js, también actualizamos las dependencias peer react y react-dom

Asegúrate de actualizar también los next-plugins como @zeit/next-css, @zeit/next-sass, @zeit/next-less o @zeit/next-typescript.

Resolución de páginas más rápida

Gracias a los cambios arquitectónicos en Next.js 5.0, pudimos simplificar la lógica que resuelve las páginas basadas en la ruta URL. Estos cambios se basaron en la investigación de @oliviertassinari. Anteriormente, resolver una página tomaba en promedio 2.347ms. Con la nueva lógica, resolver la misma página toma en promedio 0.023ms. Eso es una aceleración de 102 veces para uno de los métodos más comúnmente invocados en aplicaciones Next.js.

Resolución de página mostrada por solicitud. Izquierda es Next.js 5.0, derecha es Next.js 5.1

Configuración de entorno

Los entornos típicos de Node.js a menudo dependen de pasar variables de entorno a la aplicación, por ejemplo: API_URL=https://api.vercel.com node index.js y luego puedes usar API_URL en cualquier parte de tu aplicación mediante process.env.API_URL.

Con el renderizado universal, process.env no está disponible en el lado del cliente. Por lo tanto, con Next 5.1 estamos introduciendo una nueva característica: publicRuntimeConfig y serverRuntimeConfig. Estos se pueden configurar en next.config.js y luego estarán disponibles usando el módulo next/config.

module.exports = {
  serverRuntimeConfig: {
    // Solo estará disponible en el lado del servidor
    mySecret: 'secret',
  },
  publicRuntimeConfig: {
    // Estará disponible tanto en el servidor como en el cliente
    staticFolder: '/static',
  },
};

Tanto serverRuntimeConfig como publicRuntimeConfig se definen en next.config.js

import getConfig from 'next/config';
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
 
console.log(serverRuntimeConfig.mySecret); // Solo estará disponible en el lado del servidor
console.log(publicRuntimeConfig.staticFolder); // Estará disponible tanto en el servidor como en el cliente
 
export default function Index() {
  return (
    <div>
      <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} />
    </div>
  );
}

El método getConfig del módulo next/config se usa para obtener valores de configuración

Manejo de errores mejorado

Anteriormente, Next.js tenía un mecanismo especial de manejo de errores para detectar errores del servidor al cargar paquetes de página. Un paquete de página es el archivo javascript que se carga en el lado del cliente para cargar la página, por ejemplo /_next/-/page/index.js.

Si hubiera un error, como una discrepancia en el ID de compilación, el paquete de página aún se serviría con un estado HTTP 200, pero el contenido sería una representación JSON de un error generado por el servidor Next.js. La razón de esto es que había un manejo de errores en el lado del cliente que dependía de algo más que solo que la página fuera un 404. Esta solución funcionó muy bien, hasta que intentas cargar activos en un host de archivos estáticos o CDN que no admite un fallback.

Con Next.js 5.1 hemos refactorizado completamente la lógica de manejo de errores: cuando un paquete de página devuelve un estado HTTP 404, el enrutador lo detectará automáticamente y recargará la página, para garantizar que la navegación entre multi-zonas sea posible.

Al reescribir esta lógica, eliminamos el hook Router.onAppUpdated; que se usaba principalmente para activar una recarga de página. Ahora la página se recargará automáticamente.

Además de esto, hemos agregado un nuevo conjunto de pruebas de integración sobre la recuperación de errores en el modo de desarrollo, para evitar regresiones en la recuperación de errores en futuras versiones.

Fases / función de configuración

Algunos next-plugins como @zeit/next-css solo son necesarios cuando Next.js está en modo de desarrollo o al ejecutar next build.

Ahora puedes exportar una función que devuelva el objeto de configuración en lugar de exportar inmediatamente el objeto.

module.exports = (phase, { defaultConfig }) => config;

next.config.js exportando una función que devuelve la configuración del usuario

Exportar una función te dará acceso a la fase en la que se está ejecutando Next.js, por ejemplo desarrollo, producción, construcción, exportación. Esto permite que los plugins se carguen solo cuando sea necesario, pero también da acceso a la configuración predeterminada.

Hemos introducido un nuevo módulo llamado next/constants que contiene constantes comúnmente usadas, incluidas las fases.

const {PHASE_DEVELOPMENT_SERVER} = require('next/constants')
module.exports = (phase, {defaultConfig}){
  if(phase === PHASE_DEVELOPMENT_SERVER) {
    return { /* opciones de configuración solo para desarrollo aquí */ }
  }
 
  return { /* opciones de configuración para todas las fases excepto desarrollo aquí */ }
}

Un next.config.js que verifica la fase de desarrollo

Generación mejorada de mapas de fuente en producción

Con la introducción de webpack universal en Next.js 5, agregar mapas de fuente a tu entorno de producción se volvió tan simple como agregar unas pocas líneas a next.config.js:

module.exports = {
  webpack(config, { dev }) {
    if (!dev) {
      config.devtool = 'source-map';
      for (const plugin of config.plugins) {
        if (plugin['constructor']['name'] === 'UglifyJsPlugin') {
          plugin.options.sourceMap = true;
          break;
        }
      }
    }
    return config;
  },
};

Habilitar manualmente mapas de fuente en next.config.js

@zeit/next-source-maps se puede agregar a un proyecto para habilitar automáticamente los mapas de fuente en producción, agrega lo siguiente a next.config.js:

const withSourceMaps = require('@zeit/next-source-maps');
module.exports = withSourceMaps();

Usando @zeit/next-source-maps para habilitar mapas de fuente en next.config.js

Esto permitió la salida de mapas de fuente para todos los archivos excepto uno, app.js. La razón de esto era que app.js consistía en múltiples archivos (manifest.js y commons.js) combinados con un plugin de webpack. Un efecto secundario de esto era que webpack no podía generar mapas de fuente para el archivo combinado.

Gracias a un pull request de @ptomasroos, el archivo app.js fue reemplazado por main.js. Este archivo contendrá el código que anteriormente se compilaba a manifest.js y commons.js, y webpack generará un mapa de fuente para main.js. Los mapas de fuente se servirán automáticamente, permitiendo que las herramientas externas de seguimiento de errores muestren el archivo real y el número de línea cuando se detecten errores.

El código fuente se muestra en el panel de fuentes

Nuevos plugins / mejoras a los existentes

Hemos introducido dos nuevos plugins oficiales. @zeit/next-bundle-analyzer permite configurar fácilmente webpack-bundle-analyzer para analizar los paquetes del lado del servidor y del cliente por separado.

Además, hubo muchas mejoras en los plugins oficiales css, less y sass con respecto a la recarga en caliente y el empaquetado. Por ejemplo, ya no hay un destello de contenido sin estilo en el modo de desarrollo. Y los estilos en subcomponentes también se detectan.

Comunidad

Ahora puedes encontrar la comunidad de Next.js en GitHub. Recientemente se publicó allí una lista de empresas notables que usan Next.js. Siéntete libre de publicar proyectos en el hilo.

Agradecimientos

Nos gustaría agradecer a todos los que han contribuido a Next.js para esta versión. Ya sea contribuyendo al núcleo o expandiendo y mejorando nuestro siempre creciente directorio de ejemplos.

Si estás buscando comenzar a contribuir a Next.js, puedes encontrar problemas con la etiqueta good first issue o help wanted.

Un agradecimiento especial a Trulia por sus valiosos comentarios relacionados con la configuración del entorno y el nuevo manejo de páginas de error.