Como monitorar e impedir navegação indesejada no Next.js

A navegação em aplicações React/Next.js sempre traz desafios na experiência do usuário, principalmente quando precisamos prevenir mudanças de rota sem aviso prévio. Com Next.js na versão 12, era possível escutar eventos de navegação, como o routeChangeStart, para exibir um modal de confirmação ou evitar uma saída indesejada.

Porém, o cenário mudou com o Next.js 13, especialmente usando o roteador do next/navigation. A pergunta que fica é: como fazer essa interceptação antes que a navegação aconteça?

Experiência prática com Next.js 12

No Next.js 12, você podia fazer algo assim:

import { useRouter } from 'next/router'

useEffect(() => {
  const handleRouteChange = (url) => {
    if (!confirm(`Deseja sair da página? Vai para: ${url}`)) {
      // lógica para impedir navegação
    }
  }
  router.events.on('routeChangeStart', handleRouteChange)
  return () => {
    router.events.off('routeChangeStart', handleRouteChange)
  }
}, [])

Esse padrão permitia uma experiência mais controlada. Mas e no Next.js 13?

Como fazer no Next.js 13

O roteador do next/navigation não expõe eventos similares ao antigo router.events. Então, a dúvida é: como detectar e prevenir navegação antes dela acontecer?

Algumas estratégias envolvem o uso de componentes de confirmação ou hooks personalizados, mas ainda não há uma solução oficial clara. O que tenho visto na comunidade é a implementação de hooks que interceptam cliques de links ou botões de navegação, além de manipular o beforeUnload do navegador para evitar que o usuário perca dados.

Perguntas finais

• Vocês já tiveram que implementar esse tipo de controle na sua aplicação com Next.js 13?
• Quais patterns têm funcionado na prática?
• Vale a pena usar alguma lib específica ou criar uma solução customizada?

Vamos trocar ideias para melhorar a navegação e a UX das nossas aplicações?

---

Fonte de referência: StackOverflow