Executando verificação de segurança...
2

Next.js 13 Me Decepcionou!

Next.js App Router não tem mais como usar eventos!

Uma das coisas interessantes que o next oferece é justamente o gerenciamento de rota e de maneira tão facilitada. Entretanto, após a mudança para o app router, 'next/router' não é mais possível ser usado. Agora só é possível usar 'next/navigation', que acaba oferecendo muito menos recursos.

A principal perda, na minha visão, é a impossibilidade de usar eventos.

Agora, a única maneira de poder lidar com essas mudanças de páginas, para fazer algumas coisas como loading de carregamento de página, é basicamente gambiarra! E a pior parte foi que a própria next, em sua documentação, sugere essa gambiarra.

'use client'
 
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
 
export function NavigationEvents() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
 
  useEffect(() => {
    const url = `${pathname}?${searchParams}`
    console.log(url)
    // You can now use the current URL
    // ...
  }, [pathname, searchParams])
 
  return null
}

Isso não dá informação avançadas para fazer um loader bom o suficiente.
A comunidade anda tentando fazer algo em cima disso mas aínda continua sendo GAMBIARRA, na minha visão.

Alguém poderia me explicar um motivo plausível para a next descontinuar os eventos de rota?

Carregando publicação patrocinada...
3

Particularmente vejo esse como sendo o jeito certo, acredito que sua visão de "gambiarra" pra isso seja mais pelo fato de que mudou o jeito como era feito antes.
Geralmente, a ideia de se usar um serviço singleton externo (event emitter do next/router) pra gerenciar um estado dentro do escopo da atualização (para o next, a rota faz parte do estado da aplicação) é meio que contra indicado, tendo como ressalva um redux da vida, que gerencia todo o estado relacionado a dados por exemplo, assim usar o valor retornado pelo hook de estado realmente faz mais sentido (to escrevendo pelo celular, fica complicado desenvolver mais a ideia kkkk).
Mas se quiser ainda usar num formato singleton com eventos, você pode simplesmente criar um provider que "ouve" as mudanças no estado pelo useEffect e disparar um evento pra algum event manager (o próprio window, por exemplo), mas não recomendo muito rsrs.

3

Gostei da sua argumentação! Dado a atual situação, de fato, muitas vezes o caminho para lidar com o problema é esse que você apontou, mas todo esse 'malabarismo' feito são consequências porque o next deixou de continuar com uma funcionalidade que anteriormente existia.

2

Essa questão do roteamento está realmente me complicando, esses dias tive que implementar isso em um projeto novo e não consegui fazer sem esse tipo de gambiarra que você mencionou, e continuo enfrentando alguns bugs de estado, espero que ajustem essa parte.

2

Pois é cara... Está complicado!!

Mas acredito ter encontrado uma forma de solucionar a questão de carregamento entre as páginas com loader. Estou construindo um pacote que deve estar pronto amanhã!

Se puder depois testa-la pra ver se soluciona seu problema, seria bacana!

0

Pessoal, dado a natureza do problema de o useRouter() não estar sendo capaz de lidar com eventos mais, eu criei uma biblioteca para substituir a função, em praticamente todas as funções dentro.
https://www.npmjs.com/package/nextjs-progressloader

Quuando tiverem tempo, dê uma olhadinha por favor! Caso surgir dúvidas, sugestões, ou qualquer outra coisa, pfv me avisem! Muito obrigado pela atenção!