Optimización de rendimiento en Next.js: Guía práctica para acelerar tus aplicaciones

Crear aplicaciones web rápidas es esencial. Next.js proporciona muchas características de rendimiento integradas, pero es importante estar al día con los cambios recientes (v14/v15):

Node.js mínimo: 18.17.
El comando next export ha sido reemplazado por output: 'export' en next.config.js.
El paquete @next/font ha sido eliminado, usa el integrado next/font.
Las APIs cookies, headers, draftMode ahora son asíncronas (await requerido) en Next.js 15.
Las peticiones fetch ya no se almacenan en caché por defecto (cache: 'force-cache' si lo necesitas).
Algunas opciones de configuración han cambiado (experimental-edge → edge).
Si usas TypeScript, actualiza también @types/react y @types/react-dom.

Consulta la guía oficial de actualización para más detalles.

Optimización de Imágenes

Las imágenes grandes o no optimizadas son un cuello de botella común. El componente <Image> integrado de Next.js ayuda a optimizar automáticamente las imágenes para ti. Sirve imágenes del tamaño correcto en formatos modernos (como WebP/AVIF) y habilita la carga diferida por defecto. Por ejemplo, simplemente usa <Image> en tu componente:

1import Image from "next/image";
2
3export default function Hero() {
4  return (
5    <div>
6      <Image
7        src="/images/hero.jpg"
8        alt="Sección Hero"
9        width={1200}
10        height={600}
11        priority
12      />
13      <p>¡Bienvenido al sitio!</p>
14    </div>
15  );
16}

Carga diferida: Las imágenes solo se cargan cuando entran en la ventana de visualización, reduciendo el peso inicial.
Tamaños responsivos: <Image> selecciona automáticamente el tamaño y formato adecuado (por ejemplo, WebP) para cada dispositivo.
Marcadores de posición: Puedes usar placeholder="blur" para mostrar una vista previa de baja calidad mientras se carga la imagen completa.

Al usar <Image>, obtienes compresión inteligente, dimensionamiento adecuado y una mejora automática del Cumulative Layout Shift (CLS).

División de Código y Carga Diferida

Next.js divide automáticamente tu código a nivel de página. Cada página y Componente de Servidor se agrupa por separado, por lo que solo se carga el JavaScript necesario para la página actual. Sin embargo, puedes reducir aún más el tiempo de carga inicial cargando de forma diferida componentes o bibliotecas no críticas.

1import dynamic from "next/dynamic";
2
3const DynamicChart = dynamic(() => import("../components/Chart"), {
4  loading: () => <p>Cargando gráfico...</p>,
5});
6
7export default function Dashboard() {
8  return (
9    <div>
10      <h1>Panel de Ventas</h1>
11      <DynamicChart />
12    </div>
13  );
14}

En el ejemplo anterior, el componente Chart (que podría ser una gran biblioteca de gráficos) no se incluye en el bundle principal.

Generación Estática (SSG) y Actualizaciones Incrementales

Next.js admite varias estrategias de renderizado. La Generación de Sitio Estático (SSG) suele ser la más rápida: las páginas se preconstruyen en tiempo de compilación y se sirven como HTML estático.

1// pages/index.js
2export async function getStaticProps() {
3  const res = await fetch("https://api.example.com/posts");
4  const posts = await res.json();
5  return { props: { posts } };
6}
7
8export default function HomePage({ posts }) {
9  return (
10    <div>
11      <h1>Últimos Artículos</h1>
12      <ul>
13        {posts.map((post) => (
14          <li key={post.id}>{post.title}</li>
15        ))}
16      </ul>
17    </div>
18  );
19}

Esto le indica a Next.js que genere el HTML para / una vez durante next.build. El resultado es una página extremadamente rápida y estática.

Carga y Optimización de Fuentes

Las fuentes web pueden añadir tiempo de carga adicional y causar desplazamientos de diseño. Next.js proporciona el módulo next/font para ayudar a optimizar las fuentes.

1// app/layout.tsx
2import { Roboto } from "next/font/google";
3
4const roboto = Roboto({
5  weight: "400",
6  subsets: ["latin"],
7});
8
9export default function RootLayout({ children }) {
10  return (
11    <html lang="es" className={roboto.className}>
12      <body>{children}</body>
13    </html>
14  );
15}

Este código obtiene automáticamente la fuente Roboto en tiempo de compilación e integra el CSS necesario, eliminando una solicitud adicional de fuente.

Minimización del Tamaño del Bundle de JavaScript

Reducir tu bundle de JavaScript ayuda a que todo cargue más rápido:

Analiza tu bundle: Usa el plugin @next/bundle-analyzer para visualizar e inspeccionar el tamaño de tu bundle.
Tree-shaking y optimización de imports: Importa solo lo que necesitas.
Usa librerías más pequeñas: Considera alternativas ligeras.
Componentes de Servidor (App Router): Si usas el nuevo App Router, los componentes de servidor no envían su código al cliente.

Consejos y Herramientas Adicionales

Utiliza caché HTTP: Los recursos estáticos de Next.js pueden ser almacenados en caché por los CDN.
Activa gzip/Brotli: Comprime las respuestas si alojas en un servidor personalizado.
Mide los Core Web Vitals: Usa Lighthouse o Next.js Analytics para auditar el rendimiento de tu aplicación.

Conclusión

La optimización del rendimiento en Next.js consiste en combinar muchas pequeñas mejoras. Usa las funciones integradas de Next.js junto con las mejores prácticas. Estos pasos mejorarán los tiempos de carga, los puntajes de Core Web Vitals y, en última instancia, la satisfacción del usuario.