Nuevas Funciones de Next.js 15 - Turbopack se Vuelve Estable

Lanzamiento de Next.js 15

Next.js 15 fue lanzado en octubre de 2024. Incluye muchas nuevas funciones y mejoras como soporte para React 19, estabilizacion de Turbopack y prerenderizado parcial.

Consejo de actualizacion: La migracion automatica esta disponible con npx @next/codemod@canary upgrade latest. Puede automatizar la verificacion y correccion de cambios disruptivos.

Nuevas Funciones Principales

1. Turbopack se Vuelve Estable

Turbopack, el nuevo bundler escrito en Rust, ahora esta disponible como version estable para next dev.

# Iniciar servidor de desarrollo con Turbopack
next dev --turbo

2. Soporte para React 19

React 19 es oficialmente soportado, y las nuevas APIs de React estan disponibles.

// useActionState con Server Actions
import { useActionState } from 'react';

function Form() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      const result = await submitForm(formData);
      return result;
    },
    null
  );

  return (
    <form action={formAction}>
      <input name="email" type="email" />
      <button disabled={isPending}>
        {isPending ? 'Enviando...' : 'Enviar'}
      </button>
      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

3. Prerenderizado Parcial (PPR)

Una nueva estrategia de renderizado que prerenderiza el shell estatico y llena las partes dinamicas con streaming.

// next.config.js
module.exports = {
  experimental: {
    ppr: 'incremental'
  }
}

// page.tsx - Habilitar por ruta
export const experimental_ppr = true;

export default async function Page() {
  return (
    <>
      {/* Prerenderizado estaticamente */}
      <Header />

      {/* Streaming dinamico */}
      <Suspense fallback={<Loading />}>
        <DynamicContent />
      </Suspense>
    </>
  );
}

Beneficios de PPR: Combina la velocidad de sitios estaticos con la flexibilidad de contenido dinamico. El TTFB (Time To First Byte) mejora significativamente.

4. Introduccion de next/after

Una nueva API que permite definir procesamiento a ejecutar despues de enviar la respuesta.

import { after } from 'next/server';

export async function POST(request) {
  const data = await request.json();

  // Devolver respuesta primero
  const response = Response.json({ success: true });

  // Ejecutar despues de la respuesta (registro de logs, etc.)
  after(async () => {
    await logAnalytics(data);
    await updateMetrics();
  });

  return response;
}

Cambios Disruptivos

1. Cache de fetch/GET/HEAD Desactivado por Defecto

// v14: Cache por defecto
// v15: Sin cache por defecto

// Habilitar cache explicitamente
fetch(url, { cache: 'force-cache' });

2. Fin del Soporte para React 18

Next.js 15 requiere React 19. Si esta usando React 18, es necesario actualizar a React 19.

3. APIs de Solicitud Asincronas

cookies(), headers(), params y searchParams ahora son asincronos.

// v14
export default function Page({ params }) {
  const { id } = params;
  return <div>ID: {id}</div>;
}

// v15
export default async function Page({ params }) {
  const { id } = await params;  // Se requiere await
  return <div>ID: {id}</div>;
}

Pasos de Actualizacion

1. Ejecutar herramienta de migracion automatica

npx @next/codemod@canary upgrade latest

2. Actualizar dependencias

npm install next@15 react@19 react-dom@19

3. Adaptarse a APIs asincronas

# Conversion automatica con codemods
npx @next/codemod@canary next-async-request-api .

Resumen

Next.js 15 ha evolucionado significativamente tanto en rendimiento como en DX. Puntos principales:

• Turbopack estable: Builds de desarrollo significativamente mas rapidos
• Soporte React 19: Nuevas APIs de React disponibles
• PPR: Lo mejor de ambos mundos, estatico y dinamico
• Revision de cache: Comportamiento por defecto mas semantico

Aunque hay muchos cambios disruptivos, puede actualizar relativamente sin problemas utilizando las herramientas de migracion automatica.