introdução:

Primeiro eu quero contextualizar o porque de eu trazer este tipo de conteúdo. Primeiro e o principal é ajudar quem tem dúvida nesse tópico de assunto. Segundo que vai me ajudar a fixar melhor o conhecimento. Como já dezia Albert Einstein: "Se você consegue explicar, então você aprendeu"

Por quê Next.js?

Estou escolhendo Next.js pois é um framework popular, e a documentação pode ser confusa para algumas pessoas. A ideia não é substituir a documentação, pois tudo que vou falar aqui, vem de lá. A ideia é ajudar a entende-la. Além disso, Next.js é um dos meus principais objetos de estudo no momento, então juntei o útil ao agradável :)

Por quê Roteamento:

Dentre todos os assuntos que já li na documentação do Next.js, roteamento foi uma das mais confusas, principalmente rotas dinâmicas (ainda vou trazer o conteúdo), por tanto, resolvi trazer assuntos relacionados primeiro.

Tem uma ordem dos conteúdos

Não :) A ideia não é ensinar como um curso e nem nada. A ideia é ajudar a entender melhor cada pedacinho do Next.js, apenas. Então se você tiver uma dúvida, ou quer ver um conteúdo relacionado, basta pesquisar no tabnews sobre o assunto, que provavel que eu já tenha feito um conteúdo sobre.

O que eu ganho com isso ?

Conhecimento. Compartilhar o que aprendo me ajuda a aprender, e ainda por cima a ajudar outras pessoas. Agora sem mais delongas, vamos pro conteúdo.

O hook usePathName()

Esse hook interno do Next.js faz parte do next/navigation. Ele retorna a nossa atual URL em formato de string. Simples, não?

Sua sintaxe é bastante fácil:

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

primeiro importamos o hook e depois atribuímos seu valor a uma constante. Assim podemos usar seu valor para diversas coisas. Ah, e mais uma coisa. Por mais que o usePathname() possua parênteses, ele não recebe nenhum parâmetro.

OBS: O componente precisa ser obrigatoriamente um componente cliente

Retorno do usePathname()

Para ficar mais fácil de visualizar o que o usePathname() retorna, vou colocar alguns exemplos que estão na documentação oficial do Next.js:

URL	Valor retornado
`/`	`"/"`
`/dashboard`	`"/dashboard"`
`/dashboard?v=2`	`"/dashboard"`
`/blog/hello-world`	`"/blog/hello-world"`

O hook retorna sua URL em formato de String!

Possíveis usos:

Aqui estão alguns cenários em que a função usePathname pode ser útil:

Navegação Condicional: Você pode usar o caminho da URL para tomar decisões condicionais na sua aplicação. Por exemplo, mostrar ou ocultar componentes com base na rota atual.
Navegação de Abas ou Menu: Se você tem um menu de navegação ou abas em sua aplicação, pode usar o caminho da URL para determinar qual aba ou item do menu está ativo.
Roteamento Dinâmico: Se você está criando um aplicativo com várias rotas dinâmicas, a função usePathname permite que você acesse o caminho da URL atual e tome decisões com base nele.
Análise de Parâmetros da URL: Além do caminho, você também pode usar o hook useSearchParams para acessar os parâmetros da URL. Isso é útil quando você precisa extrair valores de consulta da URL.
Manipulação de Histórico de Navegação: Com o caminho da URL, você pode criar links ou botões que permitem aos usuários navegar para diferentes partes da sua aplicação.
Renderização Condicional de Componentes: Dependendo do caminho da URL, você pode optar por renderizar componentes diferentes. Por exemplo, em um blog, você pode usar o caminho para determinar qual post exibir.
Análise de Rota Ativa: Você pode usar o caminho da URL para destacar a rota ativa em seu menu de navegação.

Em geral, a função usePathname é uma maneira de obter o contexto da URL atual em componentes do cliente no Next.js. Isso permite que você crie lógica personalizada com base na rota atual, tornando sua aplicação mais dinâmica e adaptável às ações do usuário. É particularmente útil em casos em que você precisa criar uma interface de usuário que responda a diferentes URLs ou precisa implementar funcionalidades de navegação condicional.

Considerações finais

Gostaram do conteúdo? Querem que eu traga mais? Se tiver algo a complementar fiquem a vontade pra corrigir ou adicionar. Estamos aqui para aprender. Ajudar e ser Ajudadi :)

[ Next.js: Roteamento] Hook usePathname()