Next.js 16: guía de Migración y Novedades

Next.js 16 consolida lo que empezo en la v15: React 19, Turbopack estable, y el App Router como el camino definitivo. Si tu proyecto ya estaba en la v15 con App Router, la migración es manejable. Si todavia usabas APIs sincronas, aquí hay más trabajo.

Novedades principales

Turbopack estable para builds

En Next.js 15, Turbopack era estable solo para dev. En la v16, también lo es para build:

# Ahora es el default
next build

Los tiempos de build bajan significativamente, especialmente en proyectos grandes. No necesitas configurar nada -- es el default.

React 19 obligatorio

Next.js 16 requiere React 19. Si tu proyecto todavia usaba React 18, necesitas actualizar:

npm install react@latest react-dom@latest

React 19 trae use(), useFormStatus(), useOptimistic() y Server Actions estables. Si ya los usabas en Next.js 15, todo sigue igual.

APIs async (cookies, headers, params)

En Next.js 15, cookies(), headers() y params ya eran async pero las versiones sincronas todavia funcionaban con deprecation warnings. En la v16, las sincronas se eliminaron:

// ANTES (v15, todavia funcionaba con warning)
const cookieStore = cookies();
 
// AHORA (v16, obligatorio)
const cookieStore = await cookies();

// Params en page.tsx
export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  // ...
}

Pasos de migración

1. Actualizar paquetes

npm install next@latest react@latest react-dom@latest

Si usas TypeScript:

npm install -D @types/react@latest @types/react-dom@latest

2. Correr el codemod

Next.js incluye codemods que automatizan los cambios más comunes:

npx @next/codemod@latest upgrade

Esto actualiza:

• cookies() y headers() a sus versiones async
• params y searchParams a Promise
• Imports deprecados

3. Verificar tu next.config

// next.config.ts (v16)
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  // Turbopack es default, no necesitas habilitarlo
  // Si tenias experimental.turbo, removelo
};
 
export default nextConfig;

Opciones experimentales que se graduaron a estables en v16:

• experimental.turbo -> ya es default, removelo
• experimental.serverActions -> estable desde v15, removelo
• experimental.typedRoutes -> estable

4. Revisar middleware

Si tu middleware usaba APIs que cambiaron:

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
 
export function middleware(request: NextRequest) {
  // cookies() en middleware sigue siendo síncrono (caso especial)
  const token = request.cookies.get("token");
 
  if (!token) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
 
  return NextResponse.next();
}

5. Correr build y tests

npm run build
npm test

Revisa los warnings. Si algo falla, el error message de Next.js 16 generalmente te dice exactamente que cambiar.

Breaking changes importantes

Si todavia usas Pages Router

Pages Router sigue funcionando en Next.js 16. No esta deprecado, pero no recibe funcionalidades nuevas. Si tu proyecto es 100% Pages Router, la migración a v16 es mínima -- basicamente actualizar paquetes y React.

Pero si planeas usar features nuevas (Server Components, streaming, Server Actions), necesitas migrar a App Router. Puedes hacerlo gradualmente -- ambos routers coexisten en el mismo proyecto.

Para entender las diferencias, revisa la comparativa App Router vs Pages Router.

Siguiente paso

Con Next.js 16 actualizado, revisa que tu CI/CD siga funcionando. La guía de GitHub Actions tiene el pipeline completo. Y si deployeas con Docker, actualiza tu Dockerfile con la guía de Docker para Next.js.