Actualizar React & Next.js
Guía completa 2025: React 19 + Next.js 15+
Como Actualizar versiones
1. Verifica tu versión actual
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
Usa App Router
Recomendado desde Next.js 13+
/app/layout.tsx/app/page.tsx
Pages Router (obsoleto)
Migra a app/ para nuevas funciones
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. Limpia caché (si hay errores)
rm -rf node_modules .next package-lock.json
npm install
npm install
5. Activa Turbopack (más rápido)
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 (Next.js 15)
// 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 y seguras |
| 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
