Otimizando a Navegação no Next.js
Agora que já temos todas as páginas necessárias, vamos explorar como os usuários podem navegar entre elas. Tradicionalmente, poderíamos utilizar a tag HTML padrão <a>. No entanto, o problema dessa abordagem é que ela provoca um recarregamento completo da página, prejudicando a experiência do usuário.
O Next.js propõe o uso do componente <Link>, permitindo facilitar a navegação do lado do cliente.
Para mais detalhes sobre navegação do lado do cliente, consulte a documentação em: docs
Como alternativa, podemos continuar trabalhando no projeto. Pode confiar que utilizar o componente Link é uma abordagem superior, e veremos sua implementação prática no projeto.
De volta ao projeto
Para implementar a navegação do lado do cliente, acesse app/ui/dashboard/nav-links.tsx, importe o componente Link de next/link e substitua a tag <a> por <Link>.
Após salvar suas alterações, teste o localhost para possibilitar a navegação entre páginas sem recarregar a página.
Na Prática
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.08Otimizando a Navegação no Next.js
Deslize para mostrar o menu
Agora que já temos todas as páginas necessárias, vamos explorar como os usuários podem navegar entre elas. Tradicionalmente, poderíamos utilizar a tag HTML padrão <a>. No entanto, o problema dessa abordagem é que ela provoca um recarregamento completo da página, prejudicando a experiência do usuário.
O Next.js propõe o uso do componente <Link>, permitindo facilitar a navegação do lado do cliente.
Para mais detalhes sobre navegação do lado do cliente, consulte a documentação em: docs
Como alternativa, podemos continuar trabalhando no projeto. Pode confiar que utilizar o componente Link é uma abordagem superior, e veremos sua implementação prática no projeto.
De volta ao projeto
Para implementar a navegação do lado do cliente, acesse app/ui/dashboard/nav-links.tsx, importe o componente Link de next/link e substitua a tag <a> por <Link>.
Após salvar suas alterações, teste o localhost para possibilitar a navegação entre páginas sem recarregar a página.
Na Prática
Obrigado pelo seu feedback!
