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étodo	Descrição
`push`	Navega para nova rota (adiciona ao histórico)
`replace`	Substitui a rota atual (não adiciona ao histórico)
`refresh`	Recarrega a rota atual
`prefetch`	Pré-carrega uma rota específica
`back/forward`	Navegaçã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

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