Next.js 12.2

Estamos sentando las bases para el futuro de Next.js con la versión 12.2:

• Middleware (Estable): Enrutamiento dinámico para toda tu aplicación.
• ISR bajo demanda (Estable): Actualiza contenido sin necesidad de redeploy.
• API Routes en el Edge (Experimental): Endpoints API de alto rendimiento.
• SSR en el Edge (Experimental): Renderizado del lado del servidor (SSR) en el Edge.
• Plugins SWC (Experimental): Extiende la compilación con tus propios plugins.
• Mejoras en next/image: Incluyendo un nuevo componente next/future/image.

Actualiza hoy ejecutando npm i next@latest.

Middleware (Estable)

Nos complace anunciar que Middleware ahora es estable en la versión 12.2 y cuenta con una API mejorada basada en el feedback de los usuarios.

Middleware te permite ejecutar código antes de que se complete una solicitud. Según la solicitud entrante, puedes modificar la respuesta reescribiendo, redireccionando, agregando headers o configurando cookies.

import { NextRequest, NextResponse } from 'next/server';
 
// Si la solicitud entrante tiene la cookie "beta"
// reescribiremos la solicitud a /beta
export function middleware(req: NextRequest) {
  const isInBeta = JSON.parse(req.cookies.get('beta') || 'false');
  req.nextUrl.pathname = isInBeta ? '/beta' : '/';
  return NextResponse.rewrite(req.nextUrl);
}
 
// Soporta tanto un valor único como un array de coincidencias
export const config = {
  matcher: '/',
};

Para actualizar a los últimos cambios de la API de Middleware, consulta la guía de migración.

Prueba Middleware gratis en Vercel o cuando autoalojes usando next start.

Regeneración Estática Incremental bajo demanda (Estable)

La Regeneración Estática Incremental (ISR) bajo demanda te permite actualizar el contenido de tu sitio sin necesidad de redeploy. Esto facilita la actualización inmediata cuando cambian los datos en tu CMS headless o plataforma de comercio. Esta era una de las funciones más solicitadas por la comunidad y nos emociona que ahora sea estable.

export default async function handler(req, res) {
  // Verifica el secreto para confirmar que es una solicitud válida
  if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
    return res.status(401).json({ message: 'Token inválido' });
  }
 
  try {
    await res.revalidate('/path-to-revalidate');
    return res.json({ revalidated: true });
  } catch (err) {
    // Si hay un error, Next.js continuará mostrando
    // la última página generada exitosamente
    return res.status(500).send('Error al revalidar');
  }
}

La Regeneración Estática Incremental funciona con cualquier proveedor que soporte la API de Build de Next.js (next build). Cuando se despliega en Vercel, la revalidación bajo demanda se propaga globalmente en ~300ms al enviar páginas al edge.

Para más información, consulta la documentación o ve nuestro demo para ver la revalidación bajo demanda en acción.

API Routes en el Edge (Experimental)

Next.js ahora también soporta usar el Runtime Edge para API Routes. El Runtime Edge es más ligero que Node.js, proporcionando inicios rápidos para baja latencia. Además, las API Routes en el Edge soportan streaming de respuestas desde el servidor.

Puedes configurar el runtime para una API Route en el config, especificando nodejs (por defecto) o experimental-edge:

import type { NextRequest } from 'next/server';
 
export default (req: NextRequest) => {
  return new Response(`¡Hola, desde ${req.url} ahora soy una API Route en el Edge!`);
};
 
export const config = {
  runtime: 'experimental-edge',
};

Debido a que el Runtime Edge es ligero, tiene limitaciones para acomodar el inicio rápido - por ejemplo, no soporta APIs específicas de Node.js como fs. Por lo tanto, el runtime predeterminado para API Routes sigue siendo nodejs.

Para más información, consulta la documentación.

Renderizado del lado del servidor (SSR) en el Edge (Experimental)

Next.js ahora soporta usar el Runtime Edge para renderizado del lado del servidor (SSR).

Como se mencionó anteriormente, el Runtime Edge es más ligero que Node.js, proporcionando inicios rápidos para baja latencia. Cuando se usa con React 18, habilita el streaming de renderizado del lado del servidor para páginas.

Next.js usa Node.js como runtime predeterminado para renderizar páginas del lado del servidor. A partir de la versión 12.2, si estás usando React 18 puedes optar por usar el Runtime Edge.

Puedes configurar el runtime globalmente en next.config.js, especificando nodejs o experimental-edge:

module.exports = {
  experimental: {
    runtime: 'experimental-edge',
  },
};

Cambiar el runtime predeterminado afecta todas las páginas, incluyendo características de streaming SSR y Componentes del Servidor. También puedes sobrescribir este valor predeterminado por página, exportando un config con el runtime:

export const config = {
  runtime: 'nodejs',
};
 
export default function Home() {}

Puedes detectar qué runtime estás usando verificando la variable de entorno process.env.NEXT_RUNTIME durante la ejecución, y examinando la variable options.nextRuntime durante la compilación con webpack.

Para más información, consulta la documentación.

Mejoras en next/image

Componente next/future/image (Experimental)

Hemos escuchado tus comentarios sobre el componente Image actual y nos complace compartir una vista previa temprana del nuevo next/image. Este nuevo y mejorado componente de imagen requiere menos JavaScript del lado del cliente y simplifica cómo estilizas las imágenes:

• Renderiza un solo <img> sin wrappers <div> o <span>
• Agrega soporte para la prop style canónica
• Elimina las props layout, objectFit y objectPosition en favor de style o className
• Elimina la implementación de IntersectionObserver en favor de carga lazy nativa
• Elimina la configuración loader en favor de la prop loader
• Nota: aún no tiene modo fill, por lo que las props width & height son requeridas

Esto mejora el rendimiento porque el loading="lazy" nativo no necesita esperar a la hidratación de React ni al JavaScript del lado del cliente.

Para más información, consulta la documentación.

Patrones Remotos (Experimental)

next/image ahora soporta una opción de configuración experimental remotePatterns que te permite especificar patrones comodín para imágenes remotas cuando usas la API de Optimización de Imágenes integrada. Esto permite coincidencias más potentes más allá de la configuración existente images.domains, que solo realiza coincidencias exactas en el nombre de dominio.

module.exports = {
  experimental: {
    images: {
      remotePatterns: [
        {
          // El hostname de la propiedad `src` debe terminar con `.example.com`,
          // de lo contrario responderá con 400 Bad Request.
          protocol: 'https',
          hostname: '**.example.com',
        },
      ],
    },
  },
};

Para más información, consulta la documentación.

Desactivar la Optimización de Imágenes

La API de optimización de imágenes sin configuración (zero-config) evita el uso de next export ya que requiere un servidor para optimizar las imágenes bajo demanda según se soliciten. Hasta ahora, los usuarios que utilizaban next export necesitaban configurar el loader para usar un proveedor externo de optimización de imágenes, pero no había una solución clara si no había un proveedor disponible. A partir de hoy, los usuarios de next export pueden desactivar la optimización de imágenes para todas las instancias de next/image con una nueva propiedad de configuración:

module.exports = {
  experimental: {
    images: {
      unoptimized: true,
    },
  },
};

Plugins de SWC (Experimental)

El Compilador de Next.js utiliza SWC para transformar y minificar su código JavaScript para producción. SWC se introdujo en Next.js 12.0 para mejorar tanto el desarrollo local como el rendimiento de compilación.

Ahora puede agregar plugins (escritos en WebAssembly) para personalizar el comportamiento de transformación de SWC durante la compilación:

module.exports = {
  experimental: {
    swcPlugins: [
      ['css-variable/swc', { displayName: true, basePath: __dirname }],
    ],
  },
};

Para más información, consulte la documentación.

Mejoras en el Soporte para React 18

• Mejor soporte para bibliotecas CSS-in-JS como styled-components y emotion con una experiencia de actualización más fluida y sin cambios disruptivos.
• Ahora se admite correctamente AMP y la optimización posterior de HTML (optimizaciones de CSS, fuentes).
• next/head ahora es compatible con React 18.
• El anunciador de rutas de Next.js, que se utiliza para anunciar correctamente las transiciones de página a lectores de pantalla y otras tecnologías de asistencia, ahora es compatible con React 18.

Otras Mejoras

• Soporte para la transformación de Emotion en el Compilador de Next.js. Ahora se admiten la mayoría de las funciones de @emotion/babel-plugin, y a menos que esté utilizando importMap, puede eliminarse. Para más información, consulte la documentación.
• Mejor soporte para la transformación de styled-components en el Compilador de Next.js al permitir la personalización de las opciones predeterminadas, incluida la opción cssProp. Para más información, consulte la documentación.
• Mejor soporte para Módulos ES de JavaScript, por lo que componentes como next/image y next/link pueden importarse correctamente.
• next/link ya no requiere agregar manualmente <a> como elemento hijo. Ahora puede optar por este comportamiento de manera compatible con versiones anteriores.
• Hemos agregado soporte experimental para enviar solo JavaScript moderno modificando browsersList. Puede optar por este comportamiento configurando browsersListForSwc: true y legacyBrowsers: false en la opción experimental de next.config.js.
• Nuevas optimizaciones de @swc/helpers evitan la duplicación en los paquetes, reduciendo el tamaño del paquete en aproximadamente 2KB en una configuración mínima, y más en aplicaciones más grandes.
• Hemos reducido significativamente el tamaño de instalación de Next.js. Lo logramos al migrar nuestro monorepo a pnpm, lo que nos permite eliminar paquetes duplicados al crear las versiones precompiladas que utilizamos. Esto resulta en una reducción de 14MB en el tamaño de instalación.
• En nuestro esfuerzo continuo por mejorar el auto-hospedaje de Next.js, estamos estabilizando nuestra configuración experimental outputStandalone: true a output: 'standalone'. Esta configuración reduce drásticamente los tamaños de implementación al incluir solo los archivos/recursos necesarios, eliminando la necesidad de instalar todo node_modules en el paquete de implementación construido. Puede ver esta configuración en acción en nuestro ejemplo with-docker.

RFC de Diseños y Soporte de Enrutamiento Avanzado

Por si se lo perdió, el mes pasado anunciamos el RFC de Diseños – la mayor actualización de Next.js desde su introducción en 2016, que incluye:

• Diseños Anidados: Construya aplicaciones complejas con rutas anidadas.
• Diseñado para Componentes del Servidor: Optimizado para navegación en subárboles.
• Mejor Obtención de Datos: Obtenga datos en diseños evitando cascadas.
• Uso de Características de React 18: Streaming, Transiciones y Suspense.
• Enrutamiento Cliente y Servidor: Enrutamiento centrado en el servidor con comportamiento similar a SPA.
• 100% adoptable incrementalmente: Sin cambios disruptivos para una adopción gradual.
• Convenciones de Enrutamiento Avanzado: Almacenamiento fuera de pantalla, transiciones instantáneas y más.

Para más información, consulte el RFC o proporcione comentarios.

Agradecimientos a los Colaboradores

Next.js es el resultado del trabajo combinado de más de 2,000 desarrolladores individuales, socios de la industria como Google Chrome y Meta, y nuestro equipo central en Vercel.

Esta versión fue posible gracias a las contribuciones de: @huozhi, @ijjk, @kwonoj, @ViolanteCodes, @akrabdev, @timneutkens, @jpveilleux, @stigkj, @jgoping, @oof2win2, @Brooooooklyn, @CGamesPlay, @lfades, @molebox, @steven-tey, @SukkaW, @Kikobeats, @balazsorban44, @erikbrinkman, @therealmarzouq, @remcohaszing, @perkinsjr, @shuding, @hanneslund, @housseindjirdeh, @RobertKeyser, @styfle, @htunnicliff, @lukeshumard, @sagnik3, @pixelass, @JoshuaKGoldberg, @rishabhpoddar, @nguyenyou, @kdy1, @sidwebworks, @gnoff, @gaspar09, @feugy, @mfix-stripe, @javivelasco, @Chastrlove, @goncharov-vlad, @NaveenDA, @Firfi, @idkwhojamesis, @FLCN-16, @icyJoseph, @ElijahPepe, @elskwid, @irvile, @Munawwar, @ykolbin, @hulufei, @baruchadi, @imadatyatalah, @await-ovo, @menosprezzi, @gazs, @Exortions, @rubens-lopes, @woochul2, @stefee, @stmtk1, @jlarmstrongiv, @MaedahBatool, @jameshfisher, @fabienheureux, @TxHawks, @mattbrandlysonos, @iggyzap, @src200, @AkifumiSato, @hermanskurichin, @kamilogorek, @ben-xD, @dawsonbooth, @Josehower, @crutchcorn, @ericmatthys, @CharlesStover, @charlypoly, @apmatthews, @naingaungphyo, @alexandrutasica, @stefanprobst, @dc7290, @DilwoarH, @tommarshall, @stanhong, @leerob, @appsbytom, @sshyam-gupta, @saulloalmeida, @indicozy, @ArianHamdi, @Clariity, @sebastianbenz, @7iomka, @gr-qft, @Schniz, @dgagn, @sokra, @okbel, @tbvjaos510, @dmvjs, @PepijnSenders, @JohnPhamous, @kyliau, @eric-burel, @alabhyajindal, @jsjoeio, @vorcigernix, @clearlyTHUYDOAN, @splatterxl, @manovotny, @maxproske, @nvh95, @frankievalentine, @nuta, @bagpyp, @dfelsie, @qqpann, @atcastle, @jsimonrichard, @mass2527, @ekamkohli, @Yuddomack, @tonyspiro, @saurabhmehta1601, @banner4422, @falsepopsky, @jantimon, @henriqueholtz, @ilfa, @matteobruni, @ryscheng, @hoonoh, @ForsakenHarmony, @william-keller, @AleksaC, @Miikis, @zakiego, @radunemerenco, @AliYusuf95, y @dominiksipowicz.