Next.js 12.1 | Next.js

Estamos emocionados de lanzar una de las funciones más solicitadas con Next.js 12.1:

ISR bajo demanda (Beta): Revalida páginas usando getStaticProps al instante.
Soporte ampliado para SWC: styled-components, Relay y más.
Plugin next/jest: Soporte para Jest sin configuración usando SWC.
Minificación más rápida con SWC (RC): 7 veces más rápido que Terser.
Mejoras para auto-hospedaje: Imágenes Docker ~80% más pequeñas.
React 18 y Componentes del Servidor (Alpha): Mayor estabilidad y soporte.
Encuesta para desarrolladores: Ayúdanos a mejorar Next.js con tu feedback.

Actualiza hoy ejecutando npm i next@latest.

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

Next.js ahora expone una función unstable_revalidate() que permite revalidar páginas individuales que usan getStaticProps. Esta era una de nuestras funciones más solicitadas desde que introdujimos la Regeneración Estática Incremental (ISR) en Next.js 9.5.

Desde que se lanzó ISR, hemos visto compañías como Tripadvisor, Parachute, HashiCorp y otras mejorar drásticamente sus tiempos de compilación manteniendo un rendimiento increíble. Sin embargo, hemos escuchado sus comentarios sobre las revalidaciones basadas en intervalos y estamos emocionados de ofrecer más flexibilidad.

Actualmente, si establece un tiempo de revalidate de 60, todos los visitantes verán la misma versión generada de su sitio durante un minuto. La única forma de invalidar la caché era que alguien visitara esa página después de que pasara el minuto. Ahora puede purgar manualmente la caché de Next.js para una página específica bajo demanda.

Esto facilita actualizar su sitio cuando:

Se crea o actualiza contenido desde su CMS headless
Cambian metadatos de ecommerce (precio, descripción, categoría, reseñas, etc.)

pages/api/revalidate.js

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.unstable_revalidate('/ruta-a-revalidar');
    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');
  }
}

Dentro de getStaticProps, no necesita especificar revalidate para usar la revalidación bajo demanda. Si se omite revalidate, Next.js usará el valor predeterminado false (sin revalidación) y solo revalidará la página bajo demanda cuando se llame a unstable_revalidate().

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

Vea nuestro demo para ver la revalidación bajo demanda en acción y enviar comentarios. Svix (webhooks empresariales) y Clerk (autenticación) también han creado un demo de ISR bajo demanda.

Mejor soporte para SWC

Queremos que cada aplicación Next.js se compile más rápido para producción y obtenga retroalimentación instantánea en desarrollo local. Next.js 12 introdujo un nuevo compilador basado en Rust que aprovecha la compilación nativa.

Con 12.1, hemos añadido soporte al Compilador de Next.js para:

Con estas seis transformaciones añadidas, hemos portado los plugins más comunes de Babel a Rust usando el nuevo compilador. Si hay otros plugins que le gustaría ver, háganoslo saber en la discusión. Además, estamos trabajando en un sistema para plugins de WebAssembly de alto rendimiento habilitados a través de SWC.

Plugin de Jest sin configuración

Next.js ahora configura Jest automáticamente (next/jest) usando el Compilador de Next.js basado en Rust para transformar archivos, incluyendo:

Auto-mocking de hojas de estilo (.css, .module.css y sus variantes .scss) e importaciones de imágenes
Carga de .env (y todas sus variantes) en process.env
Ignorar node_modules en resolución y transformaciones de pruebas
Ignorar .next en resolución de pruebas
Carga de next.config.js para flags que habilitan transformaciones del compilador de Next.js

Consulte la documentación para aprender más o comience con nuestro ejemplo de Jest.

Minificación más rápida con SWC

Con Next.js 12, introdujimos minificación usando SWC como parte del Compilador de Next.js. Los primeros resultados mostraron que era 7 veces más rápido que Terser. La minificación con SWC ahora está en Release Candidate (RC) con 12.1 y será el predeterminado en 12.2.

Puede optar por usar SWC para minificación en next.config.js:

next.config.js

module.exports = {
  swcMinify: true,
};

Háganos saber sus comentarios en la discusión.

Optimización de imágenes más rápida

La API de Optimización de Imágenes integrada se ha actualizado para soportar el mismo patrón que páginas ISR, donde las imágenes se sirven stale y se revalidan en segundo plano (también conocido como stale-while-revalidate).

Esta es una mejora significativa de rendimiento para optimizar imágenes. Consulte Comportamiento de caché de imágenes para aprender más.

Mejoras para Next.js auto-hospedado

Next.js ahora puede crear automáticamente una carpeta standalone que copia solo los archivos necesarios para despliegues en producción. Esto ha resultado en imágenes Docker ~80% más pequeñas para aplicaciones Next.js auto-hospedadas.

Para aprovechar esta copia automática, puede habilitarla en su next.config.js:

next.config.js

module.exports = {
  experimental: {
    outputStandalone: true,
  },
};

Esto creará una carpeta en .next/standalone que luego puede desplegarse por sí sola sin instalar node_modules.

Consulte la documentación o comience con el ejemplo de Docker. Ahora también tenemos un ejemplo de Docker multi-entorno con soporte para cargar diferentes archivos .env según el entorno.

React 18, Componentes del Servidor y SSR Streaming (Alpha)

Como se mostró en Next.js Conf, hemos estado trabajando para llevar React 18, Suspense del lado del servidor, SSR Streaming y eventualmente Componentes del Servidor a Next.js.

Los Componentes del Servidor son una nueva función en React que permite reducir el tamaño de su paquete JavaScript separando código del servidor y del cliente. Los Componentes del Servidor permiten a los desarrolladores construir aplicaciones que abarcan el servidor y el cliente, combinando la rica interactividad de las aplicaciones del lado del cliente con el mejor rendimiento del renderizado tradicional del servidor.

Para desarrolladores siguiendo el camino de Componentes del Servidor de alpha a beta en Next.js, aquí están algunas de las actualizaciones recientes:

Estamos trabajando para permitirle ejecutar toda su aplicación Next.js renderizada en el servidor en el Edge. Puede elegir qué páginas deben optar por el Runtime Edge, para que pueda migrar páginas gradualmente desde Node.js cuando esté listo.

Publicaremos otra entrada profundizando más en el Runtime Edge pronto. Ambos de nuestros demos (next-server-components y next-rsc-demo) han sido actualizados con los últimos cambios.

Otras correcciones de errores y mejoras

Usar <a> con target="blank" ya no advierte usar next/link con ESLint.
Los archivos .d.ts ya no se consideran Páginas.
document.title ahora tiene prioridad sobre h1 al anunciar cambios de página a lectores de pantalla.
Crear pages/index/[...dynamic].js ahora funciona, lo que antes no era posible debido a que index era una palabra reservada.
Al usar dynamic(() => import('./some-component'), { ssr: false }) la importación será automáticamente eliminada del código del servidor.
Para crear una instalación más pequeña y mejorar la seguridad, estamos trabajando para precompilar más dependencias. La última adición fue node-fetch.
Mejoras para Fast Refresh al usar Middleware.
Soporte para ESLint 8 con nuestra Integración ESLint integrada.
styled-jsx ha sido actualizado a 5.0, incluyendo nuevos enlaces de error útiles para todos los errores de compilación de styled-jsx.
Runtime Edge: Soporte para AbortController y AbortSignal
Runtime Edge: Se añadieron CryptoKey y globalThis.CryptoKey.
Aplicaciones Next.js grandes están viendo mejoras de ~60% en tiempos de Fast Refresh con mejoras recientes (sobre 1,000 módulos siendo recargados).
Ahora se muestra una notificación si Fast Refresh falla y causa una recarga completa de la página.
Las rutas anunciadas ahora omiten correctamente anunciar la carga inicial de página al usar React 18 modo estricto.
Hemos reducido el número de issues abiertos en casi 300 en el repositorio de Next.js comparado con diciembre 2021 (resolvimos casi 1000 issues).

Encuesta para desarrolladores de Next.js

Comparte tu feedback y ayúdanos a mejorar Next.js con nuestra primera Encuesta para Desarrolladores.

Hay dos partes en esta encuesta: una encuesta rápida de ocho preguntas y una encuesta extendida que profundiza en feedback para funciones individuales. Nos encantaría que pudieras completar ambas secciones si tienes tiempo, pero si no, siéntete libre de enviar tus respuestas después de la primera sección.

Tus respuestas serán completamente anónimas, aunque puedes elegir compartir tus URLs de aplicaciones con nosotros si lo deseas.

¡Gracias por ayudarnos a mejorar Next.js!

Gracias, colaboradores

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

Para hacer la contribución más fácil, hemos migrado el repositorio de Next.js para usar Turborepo y mejorar el rendimiento de compilación. También hemos añadido scaffolding para pruebas y enlaces de error para facilitar comenzar a escribir pruebas. Finalmente, grabamos un video de 40 minutos mostrando cómo contribuir a Next.js.

Este lanzamiento fue posible gracias a las contribuciones de: @MaedahBatool, @mutebg, @sokra, @huozhi, @hanford, @shuding, @sean6bucks, @jameshfisher, @devknoll, @yuta-ike, @zh-lx, @amandeepmittal, @alunyov, @stefanprobst, @leerob, @balazsorban44, @kdy1, @brittanyrw, @jord1e, @kara, @vvo, @ismaelrumzan, @dlindenkreuz, @MohammadxAli, @nguyenyou, @thibautsabot, @hanneslund, @vertti, @KateKate, @stefee, @mikinovation, @Leticijak, @mohsen1, @ncphillips, @ehowey, @lancechentw, @krychaxp, @fmacherey, @pklawansky, @RyanClementsHax, @lakbychance, @sannajammeh, @oliviertassinari, @alexander-akait, @u-yas, @Cheprer, @msp5382, @chrispat, @getspooky, @Ryz0nd, @klaasman, @midgleyc, @kumard3, @jesstelford, @neeraj3029, @glenngijsberts, @pie6k, @wouterraateland, @timneutkens, @11koukou, @thesyedbasim, @aeneasr, @ijjk, @lfades, @JuniorTour, @xavhan, @mattyocode, @padmaia, @Skn0tt, @gwer, @Nutlope, @styfle, @stipsan, @xhoantran, @eolme, @sespinosa, @zenorocha, @hjaber, @benmvp, @T-O-R-U-S, @dburrows, @atcastle, @kiriny, @molebox, @Vienio99, @kyliau, @PepijnSenders, @krystofex, @PizzaPete, @souljuse, @Schniz, @Nelsonfrank, @Mhmdrza, @hideokamoto-stripe, @Emrin, @gr-qft, @delbaoliveira, @redbar0n, @lxy-yz, @Divlo, @kachkaev, @teleaziz, @OgbeniHMMD, @goncy, @bennettdams, @hsynlms, @callumgare, @jonrosner, @karaggeorge, @rpie3, @MartijnHols, @bashunaimiroy, @NOCELL, @rishabhpoddar, @omariosouto, @theMosaad, @javivelasco, @pierrenel, @lobsterkatie, @tharakabimal, @saevarb, @nbouvrette, @paulnbrd, @ecklf, @renbaoshuo, @chozzz, @tbezman, @karlhorky, @j-mendez, @ffan0811, @arthurfiorette, @chimit, @joperron, @moh12594, @rasmusjp, @bryanrsmith, @TrySound, @josharsh, @thecrypticace, @arturparkhisenko, @segheysens, @thevinter, @AryanBeezadhur, @xiaohp, @tknickman, @oriolcp, @smakosh, @jorrit, @mix3d, @Clecio013, @michielvangendt, @intergalacticspacehighway, @jbraithwaite, @marcelocarmona, @benmerckx, @haykerman, @steven-tey, @jaredpalmer, @pi-guy-in-the-sky, @JuanM04, @apollisa, @D-Pagey, @Kikobeats, @ramosbugs, @dan-weaver, @chris-stytch, @MikevPeeren, @janpio, @emw3, @nubpro, @cmdcolin, @joostdecock, @sgallese, @housseindjirdeh, @minervabot, @cjboco, @Ryuurock, @dm430, @mkarkachov, @nvh95, @gfortaine, @zifeo, @vicente-s, @Rohithgilla12, @brookton, @skirsten, @davidfateh, @DavidBabel, @mannybecerra, @pveyes, @kaykdm, @xhiroga, @mzaien, @losfair, @ykzts, @knezevicdev, @yang-feng-yfeng, @xuchaobei, @elkevinwolf, @fabienheureux, @nilskaspersson, @Andarist, @mathcrln, @dferber90, @FranciscoMoretti, @benschwarz, @wendellhu95, @gazdagergo, @imabp, @ljosberinn, @samuliasmala, @ka2jun8, @monsonjeremy, @pqt, @leoortizz, @michel-kraemer, @ntkoopman, @iicdii, @chentsulin, @ericmatthys, @lennym, @balogunkeji, @wnr, @chemicalkosek, @KittyGiraudel, @OKinane, @KonstHardy, @BrandonRomano, @furcan, @dusanralic, @elliottsj, @hi-ogawa, @panva, @genetschneider, @thundermiracle, @stefano-rainieri, @ericbiewener, @vordgi, @stevejarvis, @ihmpavel, @matamatanot, @dyarfaradj, @iheyunfei, @ascorbic, @fytriht, @emzoumpo, @onurtemiz, @a-ursino, @mxschmitt, @bywo, @OArnarsson, @TurekBot, @gish, @vadymshymko, @kamsar, @skhaz, @Prashoon123, @IrisvanOllefen, @evan-bradley, @ntltd, @EzequielDM, @oBusk, @martpie, @BruceRodrigues, @luke-h1, @lucasvazq, @velocity23, @AkiraTsuboi, @mitheelgajare, @JamiesWhiteShirt, @leroydev, @JulienZD, @leotaku, @mattfwood, y @kripod.