Como passar e acessar parâmetros de URL em Next.js

Problema

Tenho uma página inicial com links que levam a uma página de detalhes, passando parâmetros na URL, como /about?name=joao. Como posso acessar esse parâmetro na página de destino?

Contexto

No Next.js, ao usar o componente Link, posso passar os parâmetros na propriedade href usando um objeto com pathname e query. Mas, na página de destino, qual é a melhor forma de pegar esses parâmetros?

Solução

A forma recomendada é usar o hook useRouter do Next.js, que fornece o objeto router com a propriedade query. Assim, podemos acessar router.query.name para obter o valor do parâmetro.

import { useRouter } from 'next/router'

export default function About() {
  const router = useRouter()
  const { name } = router.query

  return (
    <div>
      <h1>Sobre {name}</h1>
    </div>
  )
}

Perguntas para a comunidade

• Quais cuidados devo ter ao acessar router.query em páginas que usam SSR?
• Existe alguma limitação ao usar useRouter para pegar parâmetros em páginas estáticas?
• Vocês recomendam alguma estratégia para validar ou sanitizar esses parâmetros?

Vamos discutir as melhores práticas para manipulação de query strings em Next.js, especialmente em cenários complexos ou de alta performance.