Executando verificação de segurança...
3
gusttavoaguiar
1 min de leitura ·

Dúvida: Como posso pegar dados da minha URL com nextjs?

Galera, estou com uma dúvida no Next JS, tenho uma página com nome lista.js, ao acessar por exemplo http://localhost:3000/lista/40 eu gostaria de imprimir na tela esse numero da url de forma dinamica toda vez que eu mudar o numero. Alguem sabe como posso fazer isso?

Carregando publicação patrocinada...
3
allangrds

Oi @gusttavoaguiar, tranquilo?

Acho que antes de te responder, recomendo fortemente que você de uma olhada na documentção do NextJS e depois na API Reference dele:

Agora respondendo o que você perguntou...

Você poderia criar uma arquivo como lista/[id].js e dentro desse arquivo ter algo como:

import { useRouter } from 'next/router'

const ListaComId = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>ID: {id}</p>
}

export default ListaComId
1
2
lucastpw

Cara, que massa sua pergunta (e as respostas principalmente)! Tenho um projeto em mente que vai precisar exatamente da mesma função. Eu nem acreditei quando li, sério. Foi muito bacana porque sou iniciante na programação, mas ver alguém programando algo semelhante me ajudou a dar o primeiro sinal de vida da minha cria hahaha. Vou até salvar nos meus favoritos para utilizar futuramente. Obrigado.

2
filipedeschamps

Complementando a resposta sensacional do allangrds, caso esteja gerando as páginas de forma estática, esses valores estarão dentro do context.params, usando como exemplo a própria implementação dessa página na qual você está lendo essa resposta (versão simplificada):

// Arquivo: /pages/[username]/[slug].public.js
// https://github.com/filipedeschamps/tabnews.com.br/blob/main/pages/%5Busername%5D/%5Bslug%5D/index.public.js

export async function getStaticProps(context) {
  context.params = validator(context.params, {
    username: 'required',
    slug: 'required',
  });

  // ...
}

Dentro do context.params você poderá acessar as propriedades username e slug.

0