Publicado em: 15/08/2023

Navegação Flawless com Next.js - Dominando o Uso de Link e useRouter!


Neste vídeo, exploramos as duas principais formas de navegação no Next.js: o componente Link para navegação declarativa e o hook useRouter para navegação programática, entendendo quando e como usar cada abordagem.

Componente Link: Navegação Otimizada

O componente Link é a forma recomendada para navegação entre rotas:

1import Link from "next/link";
2 function HomePage() {
3 return (
4 <Link href="/detalhes"> Ir para Detalhes </Link> ); }

Principais benefícios:

  • Pré-carregamento automático: Next.js detecta links na viewport e pré-carrega as rotas
  • Transição instantânea: Navegação sem reload completo da página
  • Histórico do navegador: Gerencia corretamente o histórico de navegação
  • Estilização fácil: Pode ser estilizado como qualquer elemento HTML

Hook useRouter: Controle Programático

Para navegação via código (como após um clique em botão):

1"use client"; import { useRouter } from "next/navigation";
2 function DetailsPage() {
3 const router = useRouter();
4 return (
5 <button onClick={() => router.push("/posts")}> Ver Posts </button> ); }

Métodos principais:

MétodoDescrição
pushNavega para nova rota (adiciona ao histórico)
replaceSubstitui a rota atual (não adiciona ao histórico)
refreshRecarrega a rota atual
prefetchPré-carrega uma rota específica
back/forwardNavegação pelo histórico

Diferenças Cruciais

Link

  • Melhor para navegação declarativa
  • Otimização automática de performance
  • Funciona em Server Components
  • Sem necessidade de "use client"

useRouter

  • Necessário para navegação programática
  • Exige Client Component ("use client")
  • Controle fino sobre o comportamento
  • Ideal para ações após eventos

Boas Práticas

  1. Prefira Link para navegações simples entre páginas
  2. Use useRouter para navegação após interações do usuário
  3. Para formulários, considere router.replace após submit
  4. Use prefetch programático para rotas críticas
  5. Mantenha a maioria dos links visíveis acima do fold para pré-carregamento eficiente

Considerações Finais

Dominar a navegação no Next.js envolve:

  • Entender quando cada abordagem é mais apropriada
  • Aproveitar as otimizações automáticas do framework
  • Manter uma experiência de usuário fluida
  • Balancear entre Server e Client Components

Com esses conceitos, você pode criar aplicações com navegação rápida e intuitiva.

Fernando Cunha
Artigo deFernando Cunha

Com mais de 15 anos de experiência em tecnologia e formado pela FAAP em Administração de empresas, hoje é o CEO da Mestres da Web, empresa referência no mercado nacional e com projeções de expansão internacional.

últimos vídeos

veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.

Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN
play

Au 02 - Front-end - React - Estrutura de projeto - Mestres BEGIN

Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.

Autor deste artigo
Fernando Cunha17/03/2025
Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN
play

Au 03 - Front-end - React - Criando layout da nossa aplicação - Mestres BEGIN

Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.

Autor deste artigo
Fernando Cunha17/03/2025
Au 04 - Front-end - React - Estilizando o layout da aplicação - Mestres BEGIN
play

Au 04 - Front-end - React - Estilizando o layout da aplicação - Mestres BEGIN

Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.

Autor deste artigo
Fernando Cunha17/03/2025