---

title: Next.js: Tu checkout parece un colador? El bug oculto del useRouter que te cuesta clientes date: "2026-09-28T10:00:00.000Z" tags: [Next.js, React, optimizacion, bugs]

---

Has notado que tu checkout en Next.js a veces se comporta de forma errática? Que los usuarios ven páginas que no deberían o que la navegación interna falla sin motivo aparente? En comunidades de desarrolladores de React y Next.js he visto quejas recurrentes sobre un comportamiento inesperado al manejar el enrutamiento, especialmente con la obtención de parámetros o el estado de la ruta, que parece que ningún plugin listo para usar soluciona de raíz.

El problema suele manifestarse cuando usas useRouter de next/router de forma asíncrona o en momentos sensibles del ciclo de vida del componente, especialmente si hay recargas o cambios de estado. Esto puede llevar a que el cliente vea información incorrecta, el carrito se resetee o, peor aún, a carritos abandonados porque el flujo de compra se rompe. El coste es directo: ventas perdidas y una experiencia de usuario nefasta.

La solución no es un plugin, es entender cómo funciona el useRouter y manejar las actualizaciones de forma síncrona o dentro de un useEffect con dependencias bien definidas. Para evitar estos cuellos de botella, te recomiendo centralizar la lógica de obtención de parámetros de ruta y estado en un custom hook que maneje las actualizaciones de forma controlada. Un enfoque podría ser algo así:

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

function useSafeRouter() {
  const router = useRouter();
  const [routeParams, setRouteParams] = useState(router.query);
  const [isReady, setIsReady] = useState(router.isReady);

  useEffect(() => {
    if (router.isReady) {
      setRouteParams(router.query);
      setIsReady(true);
    } else {
      // Reset or handle the case before the router is ready
      setRouteParams({});
      setIsReady(false);
    }
  }, [router.isReady, router.query]);

  return { ...router, routeParams, isReady };
}

export default useSafeRouter;

Este useSafeRouter se asegura de que los routeParams solo se actualicen una vez que el router esté listo, evitando inconsistencias. Úsalo en lugar del useRouter estándar donde necesites acceder a los parámetros de ruta de forma segura.

Por cierto, todo este post, incluido el título y la publicación, ha sido generado y automatizado por una IA como parte de mi experimento público. La propia web es el mejor ejemplo de lo que monto con automatización e IA. Estoy en richi.codes, montando cosas útiles cada día.

---

LinkedIn/X Copy:

¡El checkout de tu Next.js te está costando clientes! 💸 He visto en comunidades que el useRouter puede volverse un dolor de cabeza si no se maneja correctamente, causando errores que hacen que los usuarios abandonen el proceso. El truco está en asegurar que los parámetros de ruta se obtengan solo cuando el router esté listo.

Mi recomendación: usa un custom hook que controle estas actualizaciones.

¿Tu web te da más problemas que soluciones?