¿Qué hay de nuevo en Next.js 13?

 

 

 

  • Listas de verificación de diseño de interfaz inteligente
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. ¿Qué desinformación?
    2. Resumen de lanzamientos
    3. El directorio de aplicaciones
      1. No es necesario hacer "todo incluido"
    4. Nuevo paquete y puntos de referencia
    5. Optimización de fuentes
    6. Nuevos componentes de imagen y enlace
    7. Módulos ES y transpilación automática de módulos
    8. Que sigue ?

    Hablemos de Next.js, uno de los frameworks React más conocidos utilizados para producción. Desde nuevos componentes hasta optimización de fuentes, Atila comparte una descripción general rápida y lo invita a unirse a su Masterclass avanzada de Next.js que se llevará a cabo a finales de este mes.

     

    Octubre llegó y se fue, y con él, Next.js lanzó una nueva versión principal repleta (juego de palabras) con toneladas de características nuevas, algunas de las cuales se pueden adoptar sin problemas desde su aplicación Next.js 12, mientras que otras no tanto. .

    Si recién te estás subiendo al tren, puede resultar confuso distinguir la exageración, la desinformación y lo que es estable para tus aplicaciones de producción, ¡pero no temas! Estoy aquí para brindarte una buena descripción general y ponerte al día.

    ¿Qué desinformación?

    Al igual que con todas las versiones de Next.js, hay algunas API que se trasladan al núcleo estable y para uso recomendado, y hay otras que aún se encuentran en el canal experimental. Las API "experimentales" todavía están en debate. La funcionalidad principal está ahí, pero la cuestión de cómo se comportan estas API y cómo se pueden usar aún es susceptible de cambiar, ya que puede haber errores o efectos secundarios inesperados.

    En la versión 13, los lanzamientos experimentales fueron grandes y acapararon el centro de atención. Esto hizo que muchas personas consideraran que toda la versión era inestable y experimental, pero no lo es. Next.js 13 es bastante estable y permite una actualización sin problemas desde la versión 12 si no tiene intención de adoptar ninguna API experimental. La mayoría de los cambios se pueden adoptar de forma incremental, algo que detallaremos más adelante en esta publicación.

     

    Resumen de lanzamientos

    Antes de profundizar en lo que implica cada anuncio, revisemos una lista rápida y equilibremos los experimentos y las funciones estables.

    Experimental

    • Directorio de aplicaciones;
    • Nuevo paquete (Turbopack);
    • Optimización de fuentes.

    Estable

    • Componente de imagen “Nuevo” para reemplazar Imageel componente heredado de forma predeterminada;
    • Soporte de módulo ES para next.config.mjs;
    • Componente “nuevo” Link.

    El directorio de aplicaciones

    Esta característica es en realidad una gran reescritura arquitectónica. Pone los componentes de React Server al frente y al centro, aprovecha un sistema de enrutamiento y enlaces de enrutador completamente nuevos (en lugar next/navigationde next/router) y cambia toda la historia de la obtención de datos.

    Todo esto está destinado a permitir grandes mejoras de rendimiento, como renderizar con entusiasmo cada parte de su vista que no depende de los datos mientras suspende (¡lo leyó bien!) las partes que obtienen datos y se renderizan en el servidor.

    Como consecuencia, esto también supone un gran cambio en el modelo mental en la forma de diseñar su aplicación Next.js.

    Comparemos cómo eran las cosas y cómo funcionarán en el directorio de aplicaciones. Cuando se usa el /pagesdirectorio (la arquitectura que hemos estado usando hasta ahora), los datos se obtienen desde el nivel de la página y se envían en cascada hacia los componentes de la hoja.

    ( Vista previa grande )

    Por el contrario, dado que el directorio de la aplicación funciona con componentes del servidor, cada componente está a cargo de sus propios datos , lo que significa que ahora puede recuperar y luego renderizar cada componente que necesita y almacenarlos en caché individualmente, realizando una regeneración estática incremental (ISR) en un nivel mucho más granular.

    ( Vista previa grande )

    Además, Next.js continuará con las optimizaciones: las solicitudes se deduplicarán (no se permitirá que diferentes componentes activen la misma solicitud en paralelo), gracias a un cambio en la forma en que fetchfunciona el método de ejecución con el caché. De forma predeterminada, todas las solicitudes utilizarán heurísticas de caché sólidas ("force-cache"), que se pueden desactivar mediante la configuración.

    Lo leíste bien. Next.js y React Server Components interfieren con el fetchestándar para proporcionar optimizaciones de obtención de recursos.

    No es necesario hacer "todo incluido"

    Es importante señalar que la transición de la /pagesarquitectura a /appse puede realizar de forma incremental, y ambas soluciones pueden coexistir siempre y cuando las rutas no se superpongan. Actualmente no hay ninguna mención en la hoja de ruta de Next.js sobre la desaprobación del soporte para /pages.

     

    Lectura recomendada : ISR vs DPR: grandes palabras, explicación rápida por Cassidy Williams Diets, plans and health

    Nuevo paquete y puntos de referencia

    Desde su primer lanzamiento, Next.js ha utilizado webpack bajo el capó. Este año, hemos visto aparecer una nueva generación de paquetes, escritos en lenguajes de bajo nivel, como ESBuild (que impulsa Vite), Parcel 2 (Rust) y otros. También hemos visto a Vercel preparando el escenario para un gran cambio en Next.js. En la versión 12, agregaron SWC a su proceso de compilación y transpilación como un paso para reemplazar tanto a Babel como a Terser .

    En la versión 13, anunciaron Turbopack, un nuevo paquete escrito en Rust con afirmaciones de rendimiento muy audaces . Sí, ha habido controversia en Twitter sobre qué paquete es el más rápido en general y cómo se midieron esos puntos de referencia. Aún así, está fuera de debate cuánto Turbopack puede realmente ayudar a grandes proyectos escritos en Next.js con una ergonomía mucho mejor que cualquier otra herramienta (para empezar, con configuración incorporada).

    Esta característica no solo es experimental, sino que en realidad solo funciona con next dev. No deberías (y por ahora no puedes ) usarlo para una compilación de producción.

    Optimización de fuentes

    El nuevo @next/fontmódulo permite optimizar el rendimiento de sus fuentes web durante el tiempo de construcción. Descargará los recursos de fuentes durante el tiempo de compilación y los alojará en su propia /publiccarpeta. Esto ahorrará un viaje de ida y vuelta a otro servidor, evitará un protocolo de enlace adicional y, en última instancia, entregará su fuente de la manera más rápida posible y la almacenará en caché correctamente con el resto de sus recursos.

    Recuerde que cuando utilice este paquete, es importante tener una conexión a Internet que funcione cuando ejecute su compilación de desarrollo por primera vez para que pueda almacenarlo en caché correctamente; de ​​lo contrario, recurrirá a las fuentes del sistema si adjustFontFallbackno está configurado .

    Además, @next/fonttiene un módulo especial para Google Web Fonts, convenientemente disponible ya que son ampliamente utilizados:

    import { Jost } from '@next/font/google';// get an object with font styles:const jost = Jost();// define them in your component:html className={jost.className}

    El módulo también funcionará en caso de que utilice fuentes personalizadas:

    import localFont from '@next/font/local';
    const myFont = localFont({ src: './my-font.woff2' });
    html className={myFont.className}

    Aunque esta característica todavía está en versión Beta, se considera lo suficientemente estable como para usarla en producción.

    Nuevos componentes de imagen y enlace

    Podría decirse que los componentes más importantes del paquete Next.js han recibido una ligera revisión. Next Imageha estado viviendo una doble vida desde Next.js 12 en @next/imagey @next/future/image. En Next.js 13, se cambia el componente predeterminado:

     

    • next/imagemover a next/legacy/image;
    • next/future/imagemover a next/image.

    Este cambio viene con un codemod, un comando que intenta migrar automáticamente el código en su aplicación. Esto permite una migración sin problemas al actualizar Next.js:

    npx @next/codemod next-image-to-legacy-image ./pages

    Si realiza este cambio y no tiene configuradas las pruebas de regresión visual, le recomendaría que eche un vistazo a sus páginas en todos los navegadores principales para ver si todo se ve correcto.

    Para el nuevo componente Link, el cambio también debería ser sencillo. El aelemento interior Linkya no es necesario ni recomendado . El codemod lo eliminará o agregará un legacyBehavioraccesorio a su componente.

    npx @next/codemod new-link ./pages

    En caso de que el codemod falle, recibirás una advertencia de linting en el desarrollador, ¡así que mantente atento a tu terminal!

    Módulos ES y transpilación automática de módulos

    Hay dos actualizaciones que han pasado desapercibidas para la mayoría, pero las considero especialmente útiles para las personas que trabajan con Monorepos . Hasta ahora, no era muy ergonómico compartir la configuración entre archivos de configuración y otros archivos que pudieran usarse en tiempo de ejecución. Esto se debe a que next.config.jsestá escrito con CommonJS como sistema de módulos, que no puede importar desde archivos ESM. Ahora, Next.js admite ESM simplemente agregando type: "module"a su package.jsony cambiando el nombre next.config.jsnext.config.mjs.

    Nota : La "m" significa "módulo" y es parte de la especificación de Node.js para compatibilidad con ESM.

    Para Monorepos que usan paquetes internos (paquetes de JavaScript que no se publican en NPM sino que son consumidos desde el código fuente por aplicaciones hermanas dentro del monorepo), era necesario un complemento especial para transpilar esos módulos en el momento de la compilación cuando se consumen. Desde Next.js 13 en adelante, esto se puede arreglar sin un complemento simplemente pasando una propiedad (experimental) a su next.config.mjs:

    const nextConfig = { experimental: { transpilePackages: ['@my-org/internal-package'], },};

    Puedes ver un ejemplo en la plantilla de Apex-Monorepo . Con esta configuración, es posible desarrollar tanto el componente de dependencia como su aplicación simultáneamente sin ninguna publicación ni solución alternativa.

    Que sigue ?

    Si todavía está interesado en jugar y hablar más sobre estas funciones, impartiré una clase magistral avanzada de Next.js del 30 de noviembre al 15 de diciembre de 2022. Estaré muy feliz de darle la bienvenida allí y responder a todas sus preguntas. ¡tus preguntas!

    Hasta entonces, déjame saber en los comentarios a continuación o envíame un tweet a @AtilaFassina sobre cómo ha sido tu migración y qué piensas sobre las funciones experimentales.

    (vf, yk, il)Explora más en

    • Siguiente.js
    • javascript
    • API
    • Codificación





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    ¿Qué hay de nuevo en Next.js 13?

    ¿Qué hay de nuevo en Next.js 13?

    Listas de verificación de diseño de interfaz inteligente Implemente rápidamente. Implementar inteligentemente Índice

    programar

    es

    https://pseint.es/static/images/programar-que-hay-de-nuevo-en-next-1160-0.jpg

    2024-04-04

     

    ¿Qué hay de nuevo en Next.js 13?
    ¿Qué hay de nuevo en Next.js 13?

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20