Tus rutas de Remix ahora son React Router 7. ¿Y ahora qué?

Por qué los equipos de Remix se están pasando a Next.js

Remix tenía una identidad clara: React con enfoque server-first, con loaders, actions y UI colocados en un mismo archivo de ruta. Luego Shopify lo adquirió. Luego se fusionó con React Router. Ahora es React Router 7 con "Framework Mode" -- un cambio de marca que dejó a miles de desarrolladores preguntándose sobre qué están construyendo realmente.

La transición a React Router 7 trajo reestructuración de paquetes (@remix-run/* → @react-router/*), cambios en archivos de configuración, renombrado de componentes (RemixServer → ServerRouter, RemixBrowser → HydratedRouter) y cambios disruptivos en el sistema de tipos. Para muchos equipos, esa fue la señal definitiva para migrar a algo con una hoja de ruta más clara.

Next.js es ese algo. Con el App Router, React Server Components, Server Actions y el respaldo de Vercel, Next.js entrega todo lo que Remix prometió -- más ISR, renderizado en el edge y el ecosistema de framework React más grande en producción.

El problema de React Router 7

Seamos directos sobre lo que pasó. Remix v2 era un framework sólido. La fusión con React Router 7 generó problemas reales.

Crisis de identidad

¿Es un router o un framework? React Router 7 tiene tres modos: Declarative Routing, Data Router y Framework Mode. Framework Mode es esencialmente Remix con otro nombre, pero intenta explicárselo a alguien nuevo que lee la documentación por primera vez. La comunidad está dividida entre quienes lo usan como router de SPA y quienes lo usan como framework full-stack.

Incertidumbre en el ecosistema

Los paquetes @remix-run/* están deprecados. Existen guías de migración, pero son mecánicas -- cambiar nombres de paquetes, renombrar componentes, actualizar tipos. Lo que no responden es si esta plataforma volverá a cambiar de identidad en 18 meses. El soporte para RSC está "en camino", pero todavía no ha llegado. Next.js tiene RSC estable desde la versión 13.

Mindshare en declive

Respuestas en Stack Overflow, contenido de tutoriales, bolsa de talento -- Next.js domina en todos ellos. Encontrar desarrolladores de Next.js es sencillo. ¿Encontrar a alguien que entienda a fondo el Framework Mode de React Router 7? Ese es un grupo mucho más reducido.

Qué te ofrece Next.js

Pasar de Remix a Next.js no es una reescritura total. Ambos frameworks son React. Tus componentes, hooks y librerías de UI se trasladan en su mayoría sin cambios. El trabajo real de migración está en los patrones de obtención de datos y las convenciones de ruteo.

Server Components por defecto

Los componentes del App Router de Next.js son Server Components por defecto. Sin sintaxis especial, sin funciones loader -- solo componentes async que obtienen datos directamente. Para páginas de solo lectura, esto es más sencillo que el patrón de loaders de Remix.

// Patrón loader de Remix
export const loader = async () => {
  const posts = await db.posts.findMany();
  return { posts };
};

export default function Posts() {
  const { posts } = useLoaderData<typeof loader>();
  return <PostList posts={posts} />;
}

// Server Component de Next.js
export default async function Posts() {
  const posts = await db.posts.findMany();
  return <PostList posts={posts} />;
}

Menos abstracciones. Menos imports. Los datos viven justo donde está el componente.

Server Actions en lugar de Form Actions

El export action de Remix para mutaciones de formularios se mapea limpiamente a los Server Actions de Next.js. El modelo mental es similar -- funciones de mutación del lado del servidor -- pero los Server Actions son más componibles. Funcionan en cualquier componente, no solo a nivel de ruta.

// Server Action de Next.js
'use server';

export async function updateProfile(formData: FormData) {
  const name = formData.get('name');
  await db.users.update({ where: { id: userId }, data: { name } });
  revalidatePath('/profile');
}

Flexibilidad de renderizado

Remix te da una sola estrategia de renderizado: server-first. Next.js te da SSG, SSR, ISR y renderizado en el edge -- por ruta. Una página de marketing puede generarse de forma estática con ISR revalidando cada 60 segundos, mientras tu dashboard transmite datos renderizados en el servidor. Esa flexibilidad impacta directamente en el rendimiento y los costos de hosting.

Infraestructura lista para el edge

Despliega en la red edge de Vercel y tu TTFB cae por debajo de los 100 ms a nivel global. Remix puede correr en Cloudflare Workers, pero Next.js en Vercel es llave en mano -- sin configuración de servidor personalizado, sin configuración de adaptadores.

Nuestro proceso de migración

Hemos migrado aplicaciones Remix que van desde sitios de marketing con 20 rutas hasta plataformas SaaS con más de 200 rutas. Este es el proceso que hemos refinado:

Fase 1: Auditoría y arquitectura (semana 1)

Mapeamos cada ruta, loader, action y error boundary de Remix. Identificamos qué páginas deben ser estáticas (SSG/ISR), cuáles necesitan renderizado en el servidor y cuáles requieren interactividad en el cliente. También auditamos tus puntuaciones actuales de Lighthouse, Core Web Vitals y URLs indexadas para establecer líneas base.

Fase 2: Configuración del foundation (semanas 1-2)

Creamos el proyecto Next.js con App Router, configuramos TypeScript, conectamos tu solución de estilos existente (Tailwind, CSS Modules, styled-components) y configuramos el pipeline de despliegue en Vercel o el host de tu preferencia.

Fase 3: Migración de rutas (semanas 2-4)

Esta es la parte más extensa del trabajo. Cada archivo de ruta de Remix se descompone:

• Loaders → Server Components con obtención directa de datos, o generateStaticParams + fetch para páginas estáticas
• Actions → Server Actions en archivos actions.ts dedicados
• Error Boundaries → Convención error.tsx de Next.js
• Funciones Meta → generateMetadata de Next.js
• Links → <Link> de Next.js (API prácticamente idéntica)
• Layouts anidados → Archivos layout.tsx de Next.js (el mapeo es limpio, ya que ambos frameworks usan ruteo anidado)

Los componentes de React raramente necesitan cambios más allá de las rutas de importación. Tu <Button>, tu <Card>, tus hooks personalizados -- todos se trasladan directamente.

Fase 4: Preservación del SEO (semanas 4-5)

Este paso no es opcional. Implementamos:

• Redirecciones 301 para cada URL que cambie de estructura, configuradas en next.config.js
• Generación de sitemap XML mediante app/sitemap.ts
• URLs canónicas en cada página
• Datos estructurados (JSON-LD) migrados
• Metadatos de OpenGraph y tarjetas de Twitter mediante generateMetadata
• Monitoreo en Google Search Console para detectar errores de rastreo tras el lanzamiento

Hemos gestionado migraciones sin perder ninguna página con posicionamiento. La clave está en el mapeo de redirecciones y la paridad de metadatos -- verificamos que cada URL indexada tenga un destino correspondiente con una URL canónica coincidente.

Fase 5: QA, rendimiento y lanzamiento (semanas 5-6)

Realizamos auditorías completas de Lighthouse, pruebas en distintos navegadores y pruebas de carga antes de migrar el DNS. Tras el lanzamiento, monitoreamos Core Web Vitals y Search Console durante dos semanas para detectar problemas a tiempo.

Plazos y precios

Las aplicaciones Remix pequeñas con menos de 30 rutas suelen migrarse en 3-4 semanas con un precio inicial de $8.000. Las aplicaciones medianas (30-100 rutas) requieren 5-8 semanas a un costo de $15.000-$30.000. Las plataformas Remix empresariales con patrones de datos complejos, autenticación e integraciones extensas con APIs se presupuestan de forma individual.

Cada proyecto comienza con una auditoría de migración gratuita. Revisaremos tu codebase de Remix, identificaremos la complejidad de la migración y entregaremos una propuesta de precio fijo en un plazo de 48 horas.

La conclusión

Remix fue un gran framework. React Router 7 puede encontrar su rumbo con el tiempo. Pero ahora mismo, Next.js tiene el ecosistema, las herramientas, la infraestructura de despliegue y el impulso de comunidad que las aplicaciones en producción necesitan. Si el rebranding de React Router tiene a tu equipo cuestionando el futuro de tu stack, ese instinto vale la pena seguirlo.