Next.js provides the `Link` component for declarative client-side navigation and the `useRouter` hook for programmatic navigation, both enabling fast page transitions without full page reloads.
Navigation Methods:
<Link> Component (preferred)
useRouter Hook
push(), replace(), back(), forward()redirect() Function
Prefetching:
prefetch={false}Active Link Styling:
usePathname() to check current routeimport Link from 'next/link';
export default function Navigation() {
return (
<nav>
{/* Basic link */}
<Link href="/">Home</Link>
{/* Link with dynamic route */}
<Link href="/posts/123">Post 123</Link>
{/* Link with query params */}
<Link href="/search?q=nextjs">Search</Link>
{/* Link with object href */}
<Link
href={{
pathname: '/posts/[id]',
query: { id: '456' },
}}
>
Post 456
</Link>
{/* Disable prefetching */}
<Link href="/heavy-page" prefetch={false}>
Heavy Page
</Link>
{/* Replace history instead of push */}
<Link href="/login" replace>
Login
</Link>
</nav>
);
}