Next.js 16: Guia de Migracion 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 migracion es manejable. Si todavia usabas APIs sincronas, aqui hay mas trabajo.

Novedades principales

Turbopack estable para builds

En Next.js 15, Turbopack era estable solo para dev. En la v16, tambien 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 migracion

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 mas 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 sincrono (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 migracion a v16 es minima -- 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 guia de GitHub Actions tiene el pipeline completo. Y si deployeas con Docker, actualiza tu Dockerfile con la guia de Docker para Next.js.