BackVolver al blog

Next.js 13.3

Next.js 13.3 introduce imágenes Open Graph dinámicas, exportación estática avanzada, rutas paralelas e interceptación, soporte para OTEL y más.

Next.js 13.3 añade características populares solicitadas por la comunidad, incluyendo:

Actualiza hoy ejecutando:

Terminal
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Estamos cerca de marcar App Router como estable en la próxima versión menor y estamos enfocándonos en optimizar el rendimiento, mejorar comportamientos y corregir errores.

Aunque todavía estamos trabajando en algunas características como Mutaciones, no esperamos que estas afecten la superficie API de otras características de App Router. Estamos emocionados por ver lo que construyen con App Router y esperamos sus comentarios.

API de Metadatos Basada en Archivos

En Next.js 13.2, anunciamos una nueva API de Metadatos, permitiéndote definir metadatos (ej. title, meta, y etiquetas link dentro del elemento head de tu HTML) exportando un objeto Metadata desde un layout o página.

layout.js or page.js
// Metadatos estáticos
export const metadata = {
  title: 'Inicio',
};
// Salida:
// <head>
//	 <title>Inicio</title>
// </head>
 
// o Metadatos dinámicos
export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id);
  return { title: product.title };
}
// Salida:
// <head>
//	 <title>Mi Producto Único</title>
// </head>
 
export default function Page() {}

Además de los metadatos basados en configuración, la API de Metadatos ahora soporta nuevas convenciones de archivos, permitiéndote personalizar convenientemente tus páginas para mejorar SEO y compartir en la web:

  • opengraph-image.(jpg|png|svg)
  • twitter-image.(jpg|png|svg)
  • favicon.ico
  • icon.(ico|jpg|png|svg)
  • sitemap.(xml|js|jsx|ts|tsx)
  • robots.(txt|js|jsx|ts|tsx)
  • manifest.(json|js|jsx|ts|tsx)

Por ejemplo, puedes usar metadatos basados en archivos para añadir un favicon para tu app y una imagen open graph para tu página /about:

app
├── favicon.ico
├── layout.js
├── page.js
└── about
    ├── opengraph-image.jpg
    └── page.js

Next.js servirá automáticamente estos archivos con hashes (para el nombre del archivo) en producción para caché, y actualizará los elementos head relevantes con la información correcta de metadatos como la URL del recurso, tipo de archivo y tamaño de imagen.

// Visitando "/"
<link rel="icon" href="<computedUrl>"/>
 
// Visitando "/about"
<link rel="icon" href="<computedUrl>"/>
<meta property="og:image" content="<computedUrl>" type="<computedType>" ... />

Añadir archivos estáticos a tu aplicación es a menudo el enfoque más simple, pero hay casos donde necesitarás crear archivos dinámicamente. Para cada convención de archivo estático, hay una variante dinámica (.js|.jsx|.ts|.tsx) que te permite escribir código para generar el archivo.

Por ejemplo, mientras puedes añadir un archivo estático sitemap.xml, muchos sitios tienen páginas generadas dinámicamente usando una fuente de datos externa. Para generar un sitemap dinámico, puedes añadir un archivo sitemap.js que retorna un array de tus rutas dinámicas.

app/sitemap.js
export default async function sitemap() {
  const res = await fetch('https://.../posts');
  const allPosts = await res.json();
 
  const posts = allPosts.map((post) => ({
    url: `https://acme.com/blog/${post.slug}`,
    lastModified: post.publishedAt,
  }));
 
  const routes = ['', '/about', '/blog'].map((route) => ({
    url: `https://acme.com${route}`,
    lastModified: new Date().toISOString(),
  }));
 
  return [...routes, ...posts];
}

Con opciones basadas en configuración y nuevas basadas en archivos, ahora tienes una API de Metadatos completa para cubrir tanto metadatos estáticos como dinámicos.

La API de Metadatos está disponible en 13.3 para App Router (app). No está disponible en el directorio pages. Aprende más sobre metadatos basados en archivos y consulta la referencia API.

Generación Dinámica de Imágenes Open Graph

Hace seis meses, lanzamos @vercel/og y Satori, bibliotecas que te permiten generar imágenes dinámicamente usando JSX, HTML y CSS.

@vercel/og fue puesto a prueba en Next.js Conf, generando más de 100,000 imágenes dinámicas de tickets para cada asistente. Con una amplia adopción entre clientes de Vercel y más de 900,000 descargas desde su lanzamiento, estamos emocionados por llevar imágenes generadas dinámicamente a todas las aplicaciones Next.js sin necesidad de un paquete externo.

Ahora puedes importar ImageResponse desde next/server para generar imágenes:

/app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server';
 
export const size = { width: 1200, height: 600 };
export const alt = 'Acerca de Acme';
export const contentType = 'image/png';
export const runtime = 'edge';
 
export default function og() {
  return new ImageResponse();
  // ...
}

ImageResponse se integra naturalmente bien con otras APIs de Next.js, incluyendo Route Handlers y metadatos basados en archivos. Por ejemplo, puedes usar ImageResponse en un archivo opengraph-image.tsx para generar imágenes Open Graph y Twitter en tiempo de construcción o dinámicamente en tiempo de solicitud.

Aprende más sobre la API de Image Response.

Exportación Estática para App Router

El App Router de Next.js ahora soporta exportación completamente estática.

Puedes comenzar como un sitio estático o Aplicación de Página Única (SPA), y luego opcionalmente actualizar para usar características de Next.js que requieran un servidor.

Al ejecutar next build, Next.js genera un archivo HTML por ruta. Al dividir una SPA estricta en archivos HTML individuales, Next.js puede evitar cargar código JavaScript innecesario en el lado del cliente, reduciendo el tamaño del bundle y permitiendo cargas de página más rápidas.

next.config.js
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
};
 
module.exports = nextConfig;

La Exportación Estática funciona con las nuevas características del router app incluyendo Route Handlers estáticos, imágenes Open Graph y React Server Components.

Por ejemplo, los Server Components se ejecutarán durante la construcción, similar a la generación de sitios estáticos tradicional, renderizando los componentes en HTML estático para la carga inicial de página y un payload estático para la navegación entre rutas en el cliente.

Anteriormente, para usar Exportación Estática en el directorio pages, necesitabas ejecutar next export. Sin embargo, con la opción next.config.js, next build generará un directorio out cuando output: 'export' esté configurado. Puedes usar la misma configuración para el router app y el directorio pages. Esto significa que next export ya no es necesario.

Con soporte avanzado para exportación estática, obtendrás errores más temprano en el proceso de desarrollo (next dev), como cuando intentas usar una función dinámica que requiere un servidor como cookies() o headers().

Aprende más sobre Exportación Estática.

Rutas Paralelas e Interceptación

Next.js 13.3 introduce nuevas convenciones dinámicas que te permiten implementar casos avanzados de enrutamiento: Rutas Paralelas y Rutas de Interceptación. Estas características te permiten mostrar más de una página en la misma vista, como con dashboards complejos o modales.

Con Rutas Paralelas, puedes renderizar simultáneamente una o más páginas en la misma vista que pueden navegarse independientemente. También puede usarse para renderizar páginas condicionalmente.

Las Rutas Paralelas se crean usando "slots" nombrados. Los slots se definen con la convención @folder:

dashboard
├── @user
│   └── page.js
├── @team
│   └── page.js
├── layout.js
└── page.js

El layout en el mismo segmento de ruta acepta los slots como props:

app/dashboard/layout.js
export default async function Layout({ children, user, team }) {
  const userType = getCurrentUserType();
 
  return (
    <>
      {userType === 'user' ? user : team}
      {children}
    </>
  );
}

En el ejemplo anterior, los slots de ruta paralela @user y @team (explícitos) se renderizan condicionalmente basados en tu lógica. children es un slot de ruta implícito que no necesita mapearse a un @folder. Por ejemplo, dashboard/page.js es equivalente a dashboard/@children/page.js.

Las Rutas de Interceptación te permiten cargar una nueva ruta dentro del layout actual mientras "enmascaras" la URL del navegador. Esto es útil cuando mantener el contexto de la página actual es importante, como expandir una foto en un feed a través de un modal donde el feed se mantiene en el fondo del modal.

Las Rutas de Interceptación pueden definirse con la convención (..), similar a rutas relativas ../. También puedes usar la convención (...) para crear una ruta relativa al directorio app.

feed
├── @modal
│   └── (..)photo
│       └── [id]
│           └── page.tsx
├── page.tsx
└── layout.tsx
photo
└── [id]
    └── page.tsx

En el ejemplo anterior, al hacer clic en la foto desde el perfil del usuario, se abrirá la foto en un modal durante la navegación del lado del cliente. Sin embargo, al refrescar o compartir la página, se cargará la foto con su layout por defecto.

Las rutas paralelas e interceptación permiten enrutamiento modal similar a Instagram.

Las rutas paralelas e interceptación permiten enrutamiento modal similar a Instagram.

Esto resuelve los desafíos que puedas tener al crear modales, como hacer que el contenido del modal sea compartible a través de una URL, prevenir que se pierda el contexto cuando se refresca la página, y cerrar y reabrir el modal con navegación hacia atrás y adelante.

Para más ejemplos y comportamiento, consulta la documentación de Rutas Paralelas y Rutas de Interceptación.

Otras Mejoras

  • Actualizaciones de Diseño: La página principal de Next.js y el showcase han sido actualizados con un nuevo diseño.
  • Turbopack: Añadido soporte para Middleware, todas las opciones de next/font, y streaming con Server Components mientras se acerca a beta (ver demo). También hemos corregido errores adicionales descubiertos mientras probábamos en apps Next.js maduras como vercel.com y nextjs.org. Aprende más.
  • Fast Refresh para next.config.js: Los cambios en next.config.js ahora reiniciarán automáticamente tu servidor de desarrollo local. Esto extiende la recarga automática de archivos de configuración .env, .env.*, jsconfig.json, tsconfig.json.
  • Accesibilidad: App Router ahora incluye el anuncio de ruta desde pages. Esta característica anuncia transiciones de ruta del lado del cliente a lectores de pantalla y otras tecnologías de asistencia. Aprende más.
  • Enlaces Tipados Estáticamente: redirects y rewrites configurados en next.config.js ahora se consideran durante la verificación de tipos. Aprende más.
  • Tailwind CSS para create-next-app: Al iniciar un nuevo proyecto con npx create-next-app@latest, ahora puedes opcionalmente seleccionar Tailwind CSS, o usar el flag --tailwind, para preconfigurar tu aplicación con esta solución de estilos.
  • Route Handlers: Usar export default en lugar de un verbo HTTP soportado ahora lanza un error útil con route.ts. Aprende más sobre Route Handlers.
  • Imágenes: next/image ahora soporta el atributo fetchPriority="high".
  • Metadatos: La API anterior para metadatos (head.js), que fue desaprobada en 13.2, ha sido eliminada. En su lugar, usa el soporte integrado para SEO a través de la API Metadata.
  • Excluir carpetas del enrutamiento: Prefija una carpeta con _ para excluirla y cualquier segmento hijo del enrutamiento. Por ejemplo, app/_dashboard/page.tsx no sería enrutable.
  • App Router: Hemos añadido un nuevo hook useParams para componentes cliente para leer los parámetros dinámicos del segmento de ruta dado. Aprende más.
  • Mejor Carga de Hojas de Estilo: Next.js ahora implementa el CSS Suspense de React que corrige muchos problemas alrededor de la carga de CSS y destellos de contenido sin estilo, particularmente durante la navegación.
  • Mejor manejo de Not Found: Además de capturar errores esperados notFound(), el archivo raíz app/not-found.js también manejará cualquier URL no coincidente para toda tu aplicación. Esto significa que los usuarios que visiten una URL no manejada por tu app verán la UI exportada por el archivo app/not-found.js. Aprende más.
  • Mejor caché del router del lado del cliente: router.refresh() ahora invalidará toda la caché y los search params ahora son parte de la clave de caché permitiendo que la navegación entre dos search params (ej. /?search=leerob y /?search=tim) restaure correctamente el contenido que dependía del param.

Comunidad

Next.js es el resultado del trabajo combinado de más de 2,600 desarrolladores individuales, socios de la industria como Google y Meta, y nuestro equipo central en Vercel. Con más de 4.2 millones de descargas npm por semana y 104,000+ estrellas en GitHub, Next.js es una de las formas más populares de construir la Web.

Únete a la comunidad en Discusiones de GitHub, Reddit, y Discord.

Esta versión fue traída a ustedes por:

Y las contribuciones de: @shuding, @huozhi, @sokra, @hanneslund, @JesseKoldewijn, @kaguya3222, @yangshun, @ijjk, @konomae, @Brooooooklyn, @jridgewell, @zlrlyy, @JohnDaly, @abhiyandhakal, @benjie, @johnnyomair, @nk980113, @dirheimerb, @DerTimonius, @DuCanhGH, @padmaia, @stafyniaksacha, @Gladowar, @zek, @jankaifer, @styfle, @balazsorban44, @wbinnssmith, @chibicode, @ForsakenHarmony, @franktronics, @FSaldanha, @Schniz, @raisedadead, @AdamKatzDev, @wyattjoh, @leerob, @meesvandongen, @vladikoff, @feedthejim, @tka5, @pyjun01, @gdborton, @M3kH, @aretrace, @shivanshubisht, @alexkirsz, @agrattan0820, @vinaykulk621, @heyitsuzair, @mrkldshv, @timneutkens, @furkanmavili, @swaminator, @EndangeredMassa, @DevEsteves, @rishabhpoddar, @schehata, @molebox, @dlehmhus, @akshaynox, @sp00ls, @janicklas-ralph, @tomryanx, @kwonoj, @karlhorky, @kdy1, @dante-robinson, @lachlanjc, @ianmacartney, @hotters, @isaackatayev, @insik-han, @jayair, @ivanhofer, @javivelasco, @SukkaW, @visshaljagtap, @imranbarbhuiya, @nivak-monarch, @HarshaVardhanReddyDuvvuru, @ianldgs, @ricardofiorani, @swarnava, y @gustavostz.