Actualizar Next.js
Guía completa 2025 – Next.js 15 + React 19
1. Verifica tus versiones actuales
npm list next react react-dom
# o revisa package.json
# o revisa package.json
2. Actualiza Next.js + React
npm install next@latest react@latest react-dom@latest
Yarn
yarn add next@latest react@latest react-dom@latest
pnpm
pnpm add next@latest react@latest react-dom@latest
App Router
Recomendado desde Next.js 13+
/app/layout.tsx/app/page.tsx
Pages Router
Considera migrar a app/
3. Configuración moderna: next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: {
reactCompiler: true,
},
};
export default nextConfig;
Activa React Compiler (React 19)
const nextConfig = {
reactStrictMode: true,
experimental: {
reactCompiler: true,
},
};
export default nextConfig;
4. Root Layout (React 19)
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="es">
<body>{children}</body>
</html>
);
}
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="es">
<body>{children}</body>
</html>
);
}
5. Limpia caché (si hay errores)
rm -rf node_modules .next package-lock.json
npm install
npm install
6. Activa Turbopack (opcional)
npm run dev -- --turbo
En package.json:
"scripts": {
"dev": "next dev --turbo",
"build": "next build",
"start": "next start"
}
"dev": "next dev --turbo",
"build": "next build",
"start": "next start"
}
Ejemplo: Server Action
// app/contact/page.tsx
export default function Contact() {
async function sendMessage(formData: FormData) {
'use server';
const name = formData.get('name');
console.log('Mensaje de:', name);
}
return (
<form action={sendMessage}>
<input name="name" placeholder="Tu nombre" required />
<button type="submit">Enviar</button>
</form>
);
}
export default function Contact() {
async function sendMessage(formData: FormData) {
'use server';
const name = formData.get('name');
console.log('Mensaje de:', name);
}
return (
<form action={sendMessage}>
<input name="name" placeholder="Tu nombre" required />
<button type="submit">Enviar</button>
</form>
);
}
Cambios clave (Next.js 15 + React 19)
| Característica | Detalle |
|---|---|
| React 19 | use, useActionState, useOptimistic |
| React Compiler | Memoización automática |
| Server Actions | Más estables |
| PPR | Partial Prerendering |
| Turbopack | Dev 10x más rápido |
Comandos útiles
npx next info→ Info del proyectonpm outdated→ Paquetes desactualizadosnpm run build→ Verifica producción
Migrar Pages → App Router
- Crea carpeta
app/ - Mueve
pages/index.tsx→app/page.tsx - Crea
app/layout.tsx - Elimina
_app.tsxy_document.tsx
