Navigation with Link and Router APIs
Next.js provides navigation primitives designed to work with its routing architecture. The Link component is preferred for normal application navigation because it can provide framework-aware navigation and prefetching.
Client components can use useRouter, usePathname, and useSearchParams when navigation depends on browser interaction.
Use declarative links whenever possible. Imperative router calls are better suited for actions such as redirecting after form submission.
Navigation Examples
import Link from 'next/link';
export default function Navigation() {
return (
<nav>
<Link href='/'>Home</Link>
<Link href='/products'>Products</Link>
</nav>
);
}💡 Link provides framework-aware navigation and should normally be preferred over manually manipulating window.location.
Key Takeaways
- Prefer
Linkfor normal internal navigation. - Use router hooks for interactive client-side navigation.
- Do not use
window.locationas the default navigation mechanism.