useRouter e dados na url do navegador com NextJs

  Olá, seja muito bem vindo(a), anteriormente nós criamos o botão de DarkMode funcional para o projeto: https://programacao-descomplicada.blogspot.com/2022/12/darkmode-usando-provider-no-nextjs.html, e agora vamos começar a desenvolver a página de produtos, sendo que minha ideia inicial é desenvolver uma página única, passando apenas as informações diferenciadas existentes no config.json.

  Primeiro eu criei um arquivo chamado productPage.js dentro da pasta Pages do projeto. Agora, no componente de ProductList, eu importo o useRouter:

import { useRouter } from 'next/router'; 

  Ainda no arquivo ProductList, acima do return, eu adicionei a constante const router = useRouter(). Com isso, indo para a parte de renderização do componente de card dos produtos, nós temos uma tag a para o link que nos leva a página do produto.

  Primeiro eu o substituí por uma tag button, tive que reorganizar um pouco a estilização para que o button estivesse igual em estilização da tag a. Nesse button eu coloquei no onClick, uma arrow function com o método push do useRouter, repare que nesse momento se formos testar, sempre que eu clicar em ver produto em qualquer um dos cards nesse momento, eu serei levado para a mesma página que seria a productPage.

<button onClick={() => {

router.push("/productPage")

}} >Ver produto</button>

  Agora eu preciso de alguma forma enviar os dados que estiverem no card para essa página do produto para ela ser construída com eles mudando apenas o conteúdo entre elas. Eu optei por usar o userRouter para passar o título do produto através do url, dessa forma eu faço um filter no config.json levando em conta que cada título precisa ser diferente já que eles estão sendo usados como key nos cards.

  Após isso, eu usei o filter para encontrar o produto no config.json usando o título e fiz um .map() para procurar nas listas de produtos. Obtive o resultado esperado, restando apenas a estilização da página no qual usei o CSS que estava pronto do projeto anterior em HTML e CSS. 

  Uma coisa que eu reparei foi que eu adicionei um local no config.json para colocar a url da página do produto e não era necessário, irei pega-lo e modificar para adicionar a descrição do produto no lugar para poder utilizar na página de produto. 

  Após resolver a estilização da página de visualização do produto eu percebi que ainda faltam alguns botões para adicionar, como o adicione ao carrinho (ainda falta o carrinho também, nesse caso rsrs), botão de contador de quantidade de produtos para compra, produtos similares (só usar a tática do filter idêntico ao da pesquisa talvez), entre outras coisas.

  Vou ficando por aqui neste momento, mas deixo todas as ideias de implementação mencionadas no parágrafo acima para implementação em breve, um abraço e até o próximo artigo. 

Blog: https://programacao-descomplicada.blogspot.com/2022/12/userouter-e-dados-na-url-do-navegador.html