Hmm... Next.js 14

Traducido del post de los devs de Vercel Lee Robinson y Tim Neutken de octubre 26, 2023

Mejor compilador

En la versión 13 de Next.js, se ha visto un enfoque decidido en la mejora del rendimiento del desarrollo local, abarcando tanto las páginas como el enrutador de la aplicación.

En un inicio, el equipo realizó una reescritura de next dev y otras componentes de Next.js para respaldar esta iniciativa. Sin embargo, cambiaron su táctica hacia un enfoque más incremental, a la vez que se prioriza la estabilidad de su compilador basado en Rust. Este enfoque está a punto de fructificar, ya que se han dedicado a asegurar el soporte completo de todas las funciones de Next.js.

Con Turbopack como su motor subyacente en Rust, el equipo ha superado más de 5,000 pruebas de integración para next dev, las cuales abarcan siete años de correcciones de errores y reproducciones.

En las pruebas realizadas en vercel.com, una aplicación robusta construida con Next.js, se han observado mejoras sustanciales:

Inicio del servidor local hasta un 53.3% más rápido.
Actualizaciones de código hasta un 94.7% más rápidas con Fast Refresh.

Estos resultados prácticos reflejan mejoras de rendimiento notables, especialmente en aplicaciones grandes con un extenso grafo de módulos. Con un 90% de las pruebas para next dev superadas, los usuarios pueden esperar un rendimiento más rápido y consistente al utilizar next dev —turbo.

Una vez que se alcance el 100% de pruebas superadas, el equipo tiene planes de implementar Turbopack en la versión estable en una próxima actualización. Además, continuarán respaldando el uso de webpack para configuraciones personalizadas y complementos del ecosistema.

Para mantenerse al tanto del progreso, los interesados pueden consultar el porcentaje de pruebas superadas en areweturboyet.com.

Formularios y Mutaciones

La API de Rutas apareció en Next.js 9. Mediante esta, se pueden crear endpoints del backend a la vez que el frontend.

Podrías crear un archivo así en el directorio api/ llamado pages/api/submit.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { createItem } from "@/app/actions";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
	const data = req.body;
	const id = await createItem(data);
	res.status(200).json({ id });
}

En el lado del cliente, puedes utilizar React y un manejador de eventos como onSubmit para hacer un fetch a tu API de Rutas

import { FormEvent } from 'react';
// pages/index.tsx
export default function Page() {
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const formData = new FormData(event.currentTarget);
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    });

    // Handle response if necessary
    const data = await response.json();
    // ...
  }

  return (
    <form onSubmit= { onSubmit } >
      <input type="text" name = "name" />
      <button type="submit" > Submit < /button>
    < /form>
  );

Ahora, con Next.js 14, los devs buscan simplificar la experiencia de los desarrolladores a la hora de crear mutaciones de datos. Además, planean mejorar la experiencia del usuario cuando éste tenga una conexión de red lenta, o cuando envíe un formulario desde un dispositivo poco potente.

Server Actions estables

¿Qué pasaría si no tuvieras que construir manualmente una API de Rutas? En su lugar, podrías definir una función que se ejecute de forma segura en el servidor, llamada directamente desde tus componentes React.

El Router está construido en el canal canary de React, que es estable para que los frameworks adopten novedosas funcionalidades. A partir de la versión 14, Next.js se ha actualizado hasta el último canary de React, el cual incluye Server Actions estables.

El ejemplo anterior del Router en base a páginas puedes ser simplificado a solo un archivo

// app/page.tsx

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }

  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Las Server Actions resultan familiares a cualquier desarrollador que haya utilizado anteriormente frameworks o centrados en el servidor. Está construido sobre fundamentos web como formularios y la API web FormData.

Si bien utilizar Server Actions a través de un formulario es útil para mejorar progresivamente, no es un requisito. También puedes llamarlas directamente como una función, sin necesidad de un formulario. Al usar TypeScript, esto te brinda una seguridad de tipos completa de extremo a extremo entre el cliente y el servidor.

La mutación de datos, la re-renderización de la página o la redirección pueden ocurrir en una única ida y vuelta de red, asegurando que los datos correctos se muestren en el cliente, incluso si el proveedor aguas arriba es lento. Además, puedes componer y reutilizar diferentes acciones, incluyendo muchas acciones diferentes en la misma ruta.

Caching, Revalidating, Redirecting y más

Las Server Actions están integradas de manera profunda en todo el modelo del Router de la aplicación. Puedes:

Revalidar datos en caché con revalidatePath() o revalidateTag().
Redirigir a diferentes rutas mediante redirect().
Establecer y leer cookies a través de cookies().
Manejar actualizaciones de optimistic en la UI con useOptimistic().
Capturar y mostrar errores desde el servidor con useFormState().
Mostrar estados de carga en el cliente con useFormStatus().

Aprende más sobre Formularios y Mutaciones con Server Actions o acerca del security model y las mejores prácticas para Componentes y Server Actions.

Mejoras a los metadatos

”Antes de que el contenido de tu página pueda transmitirse desde el servidor, es necesario enviar al navegador metadatos importantes sobre el viewport, el esquema de color y el tema.

Asegurarse de que estas etiquetas meta se envíen con el contenido inicial de la página contribuye a una experiencia de usuario fluida, evitando que la página parpadee al cambiar el color del tema o al modificar el diseño debido a cambios en el viewport.

En Next.js 14, hemos separado los metadatos bloqueantes y no bloqueantes. Solo un pequeño conjunto de opciones de metadatos son bloqueantes, y queremos asegurarnos de que los metadatos no-bloqueantes no impidan que una página parcialmente prerenderizada sirva solo de una cubierta estática.

Las siguientes opciones de metadatos ahora están obsoletas y se eliminarán de metadata en una futura versión principal:

viewport: Establece el zoom inicial y otras propiedades del viewport.
colorScheme: Establece los modos de soporte (claro/oscuro) para el viewport.
themeColor: Establece el color con el que el marco alrededor del viewport debe renderizarse.

A partir de Next.js 14, hay nuevas opciones como viewport y generateViewport para reemplazar estas opciones. Todas las demás opciones de metadatos permanecen iguales.

Puedes comenzar a adoptar estas nuevas API hoy mismo. Las opciones de metadata existentes seguirán funcionando.

Curso de aprendizaje de Next.js

Se ha lanzado un curso completamente nuevo y gratuito en Next.js Learn. Este curso enseña:

El Router de Aplicaciones de Next.js
Estilos y Tailwind CSS
Optimización de fuentes e imágenes
Creación de diseños y páginas
Navegación entre páginas
Configuración de tu base de datos Postgres
Obtención de datos con Server Components
Renderización estática y dinámica
Transmisión
Pre-renderización parcial (opcional)
Agregar búsqueda y paginación
Mutar datos
Manejar errores
Mejorar la accesibilidad
Agregar autenticación
Agregar metadatos

Next.js Learn ha enseñado a millones de desarrolladores sobre los fundamentos del marco de trabajo, y estamos ansiosos por conocer tus comentarios sobre nuestra nueva adición. Dirígete a nextjs.org/learn para tomar el curso.

Otros Cambios

[Breaking] La versión mínima de Node.js ahora es 18.17
[Breaking] Se elimina el destino WASM para la construcción de next-swc (PR)
[Breaking] Se ha eliminado el soporte para @next/font a favor de next/font (Codemod)
[Breaking] Cambiado la importación de ImageResponse de next/server a next/og (Codemod)
[Breaking] Se ha eliminado el comando next export en favor de la configuración output: ‘export’ (Docs)
[Deprecación] onLoadingComplete para next/image está obsoleto, se prefiere onLoad
[Deprecación] domains para next/image está obsoleto, se prefiere remotePatterns
[Feature] Se puede habilitar un registro más detallado en torno al almacenamiento en caché de fetch (Docs)
[Mejora] Tamaño de función un 80% más pequeño para una aplicación básica de create-next-app
[Mejora] Mejora en la gestión de memoria al utilizar el tiempo de ejecución edge durante el desarrollo

Contribuidores

Next.js es el resultado del trabajo conjunto de más de 2.900 desarrolladores individuales, socios industriales como Google y Meta, y el equipo central en Vercel. La comunidad está en GitHub Discussions, Reddit, and Discord.

Esta release fue traída para ti por:

El quipo de Next.js: Andrew, Balazs, Jiachi, Jimmy, JJ, Josh, Sebastian, Shu, Steven, Tim, Wyatt, and Zack.
El equipo de Turbopack: Donny, Justin, Leah, Maia, OJ, Tobias, and Will.
Next.js Learn: Delba, Steph, Emil, Balazs, Hector, and Amy.

Y las contribuciones de: @05lazy, @0xadada, @2-NOW, @aarnadlr, @aaronbrown-vercel, @aaronjy, @abayomi185, @abe1272001, @abhiyandhakal, @abstractvector, @acdlite, @adamjmcgrath, @AdamKatzDev, @adamrhunter, @ademilter, @adictonator, @adilansari, @adtc, @afonsojramos, @agadzik, @agrattan0820, @akd-io, @AkifumiSato, @akshaynox, @alainkaiser, @alantoa, @albertothedev, @AldeonMoriak, @aleksa-codes, @alexanderbluhm, @alexkirsz, @alfred-mountfield, @alpha-xek, @andarist, @Andarist, @andrii-bodnar, @andykenward, @angel1254mc, @anonrig, @anthonyshew, @AntoineBourin, @anujssstw, @apeltop, @aralroca, @aretrace, @artdevgame, @artechventure, @arturbien, @Aryan9592, @AviAvinav, @aziyatali, @BaffinLee, @Banbarashik, @bencmbrook, @benjie, @bennettdams, @bertho-zero, @bigyanse, @Bitbbot, @blue-devil1134, @bot08, @bottxiang, @Bowens20832, @bre30kra69cs, @BrennanColberg, @brkalow, @BrodaNoel, @Brooooooklyn, @brunoeduardodev, @brvnonascimento, @carlos-menezes, @cassidoo, @cattmote, @cesarkohl, @chanceaclark, @charkour, @charlesbdudley, @chibicode, @chrisipanaque, @ChristianIvicevic, @chriswdmr, @chunsch, @ciruz, @cjmling, @clive-h-townsend, @colinhacks, @colinking, @coreyleelarson, @Cow258, @cprussin, @craigwheeler, @cramforce, @cravend, @cristobaldominguez95, @ctjlewis, @cvolant, @cxa, @danger-ahead, @daniel-web-developer, @danmindru, @dante-robinson, @darshanjain-entrepreneur, @darshkpatel, @davecarlson, @David0z, @davidnx, @dciug, @delbaoliveira, @denchance, @DerTimonius, @devagrawal09, @DevEsteves, @devjiwonchoi, @devknoll, @DevLab2425, @devvspaces, @didemkkaslan, @dijonmusters, @dirheimerb, @djreillo, @dlehmhus, @doinki, @dpnolte, @Drblessing, @dtinth, @ducanhgh, @DuCanhGH, @ductnn, @duncanogle, @dunklesToast, @DustinsCode, @dvakatsiienko, @dvoytenko, @dylanjha, @ecklf, @EndangeredMassa, @eps1lon, @ericfennis, @escwxyz, @Ethan-Arrowood, @ethanmick, @ethomson, @fantaasm, @feikerwu, @ferdingler, @FernandVEYRIER, @feugy, @fgiuliani, @fomichroman, @Fonger, @ForsakenHarmony, @franktronics, @FSaldanha, @fsansalvadore, @furkanmavili, @g12i, @gabschne, @gaojude, @gdborton, @gergelyke, @gfgabrielfranca, @gidgudgod, @Gladowar, @Gnadhi, @gnoff, @goguda, @greatSumini, @gruz0, @Guilleo03, @gustavostz, @hanneslund, @HarshaVardhanReddyDuvvuru, @haschikeks, @Heidar-An, @heyitsuzair, @hiddenest, @hiro0218, @hotters, @hsrvms, @hu0p, @hughlilly, @HurSungYun, @hustLer2k, @iamarpitpatidar, @ianldgs, @ianmacartney, @iaurg, @ibash, @ibrahemid, @idoob, @iiegor, @ikryvorotenko, @imranbarbhuiya, @ingovals, @inokawa, @insik-han, @isaackatayev, @ishaqibrahimbot, @ismaelrumzan, @itsmingjie, @ivanhofer, @IvanKiral, @jacobsfletch, @jakemstar, @jamespearson, @JanCizmar, @janicklas-ralph, @jankaifer, @JanKaifer, @jantimon, @jaredpalmer, @javivelasco, @jayair, @jaykch, @Jeffrey-Zutt, @jenewland1999, @jeremydouglas, @JesseKoldewijn, @jessewarren-aa, @jimcresswell, @jiwooIncludeJeong, @jocarrd, @joefreeman, @JohnAdib, @JohnAlbin, @JohnDaly, @johnnyomair, @johnta0, @joliss, @jomeswang, @joostdecock, @Josehower, @josephcsoti, @josh, @joshuabaker, @JoshuaKGoldberg, @joshuaslate, @joulev, @jsteele-stripe, @JTaylor0196, @JuanM04, @jueungrace, @juliusmarminge, @Juneezee, @Just-Moh-it, @juzhiyuan, @jyunhanlin, @kaguya3222, @karlhorky, @kevinmitch14, @keyz, @kijikunnn, @kikobeats, @Kikobeats, @kleintorres, @koba04, @koenpunt, @koltong, @konomae, @kosai106, @krmeda, @kvnang, @kwonoj, @ky1ejs, @kylemcd, @labyrinthitis, @lachlanjc, @lacymorrow, @laityned, @Lantianyou, @leerob, @leodr, @leoortizz, @li-jia-nan, @loettz, @lorenzobloedow, @lubakravche, @lucasassisrosa, @lucasconstantino, @lucgagan, @LukeSchlangen, @LuudJanssen, @lycuid, @M3kH, @m7yue, @manovotny, @maranomynet, @marcus-rise, @MarDi66, @MarkAtOmniux, @martin-wahlberg, @masnormen, @matepapp, @matthew-heath, @mattpr, @maxleiter, @MaxLeiter, @maxproske, @meenie, @meesvandongen, @mhmdrioaf, @michaeloliverx, @mike-plummer, @MiLk, @milovangudelj, @Mingyu-Song, @mirismaili, @mkcy3, @mknichel, @mltsy, @mmaaaaz, @mnajdova, @moetazaneta, @mohanraj-r, @molebox, @morganfeeney, @motopods, @mPaella, @mrkldshv, @mrxbox98, @nabsul, @nathanhammond, @nbouvrette, @nekochantaiwan, @nfinished, @Nick-Mazuk, @nickmccurdy, @niedziolkamichal, @niko20, @nikolovlazar, @nivak-monarch, @nk980113, @nnnnoel, @nocell, @notrab, @nroland013, @nuta, @nutlope, @obusk, @okcoker, @oliviertassinari, @omarhoumz, @opnay, @orionmiz, @ossan-engineer, @patrick91, @pauek, @peraltafederico, @Phiction, @pn-code, @pyjun01, @pythagoras-yamamoto, @qrohlf, @raisedadead, @reconbot, @reshmi-sriram, @reyrodrigez, @ricardofiorani, @rightones, @riqwan, @rishabhpoddar, @rjsdnql123, @rodrigofeijao, @runjuu, @Ryan-Dia, @ryo-manba, @s0h311, @sagarpreet-xflowpay, @sairajchouhan, @samdenty, @samsisle, @sanjaiyan-dev, @saseungmin, @SCG82, @schehata, @Schniz, @sepiropht, @serkanbektas, @sferadev, @ShaunFerris, @shivanshubisht, @shozibabbas, @silvioprog, @simonswiss, @simPod, @sivtu, @SleeplessOne1917, @smaeda-ks, @sonam-serchan, @SonMooSans, @soonoo, @sophiebits, @souporserious, @sp00ls, @sqve, @sreetamdas, @stafyniaksacha, @starunaway, @steebchen, @stefanprobst, @steppefox, @steven-tey, @suhaotian, @sukkaw, @SukkaW, @superbahbi, @SuttonJack, @svarunid, @swaminator, @swarnava, @syedtaqi95, @taep96, @taylorbryant, @teobler, @Terro216, @theevilhead, @thepatrick00, @therealrinku, @thomasballinger, @thorwebdev, @tibi1220, @tim-hanssen, @timeyoutakeit, @tka5, @tknickman, @tomryanx, @trigaten, @tristndev, @tunamagur0, @tvthatsme, @tyhopp, @tyler-lutz, @UnknownMonk, @v1k1, @valentincostam, @valentinh, @valentinpolitov, @vamcs, @vasucp1207, @vicsantizo, @vinaykulk621, @vincenthongzy, @visshaljagtap, @vladikoff, @wherehows, @WhoAmIRUS, @WilderDev, @Willem-Jaap, @williamli, @wiredacorn, @wiscaksono, @wojtekolek, @ws-jm, @wxh06, @wyattfry, @wyattjoh, @xiaolou86, @y-tsubuku, @yagogmaisp, @yangshun, @yasath, @Yash-Singh1, @yigithanyucedag, @ykzts, @Yovach, @yutsuten, @yyuemii, @zek, @zekicaneksi, @zignis, and @zlrlyy