Navigation & Linking

Next.js provides several navigation mechanisms, each designed for a specific use case. The key differentiator from plain React is automatic prefetching and client-side transitions that preserve state.

The <Link> Component

The primary navigation mechanism — renders an <a> tag with automatic prefetching and client-side navigation:

import Link from 'next/link';
 
<Link href="/about">About</Link>
<Link href="/blog/hello-world">Blog Post</Link>
<Link href={{ pathname: '/search', query: { q: 'react' } }}>Search</Link>

<Link> extends the HTML <a> tag with:

• Automatic prefetching: Links in the viewport are prefetched automatically (static routes load the full page; dynamic routes load up to the nearest loading.tsx boundary)
• Client-side navigation: Clicking doesn't trigger a full page reload — Next.js updates only the changed segments, preserving shared layouts and React state
• Scroll restoration: Scrolls to the top on navigation, preserves scroll position on back/forward

Control prefetching: <Link href="/heavy" prefetch={false}> disables automatic prefetch for heavy pages.

useRouter() Hook

For programmatic navigation in event handlers (Client Components only):

'use client';
import { useRouter } from 'next/navigation';
 
function LoginButton() {
  const router = useRouter();
  
  async function handleLogin() {
    await signIn();
    router.push('/dashboard');
  }
  
  return <button onClick={handleLogin}>Login</button>;
}

Key methods:

• router.push('/path') — Navigate to a new route (adds to history)
• router.replace('/path') — Navigate without adding to history (login → dashboard)
• router.back() — Go back in history
• router.forward() — Go forward in history
• router.refresh() — Re-fetch the current route's Server Component data without a full page reload
• router.prefetch('/path') — Manually prefetch a route

Important: Import useRouter from next/navigation (App Router), not next/router (Pages Router).

redirect() Function

For server-side redirects in Server Components, Server Actions, and Route Handlers:

import { redirect } from 'next/navigation';
 
async function Profile() {
  const session = await getSession();
  if (!session) redirect('/login'); // Server-side redirect
  return <Dashboard user={session.user} />;
}

redirect() throws a special error internally — it cannot be wrapped in try/catch. It sends a 307 (temporary redirect) by default; use permanentRedirect() for 308 (permanent).

usePathname() and useSearchParams()

Hooks for reading the current URL in Client Components:

'use client';
import { usePathname, useSearchParams } from 'next/navigation';
 
function NavLink({ href, children }) {
  const pathname = usePathname();
  const isActive = pathname === href;
  return <Link href={href} className={isActive ? 'active' : ''}>{children}</Link>;
}

useSearchParams() returns URLSearchParams for reading query string values. Wrap components using useSearchParams in <Suspense> to prevent the entire page from becoming dynamic.

Navigation Behavior

Next.js navigation is a client-side transition that:

1. Prefetches the target route (if not already cached)
2. Checks the Router Cache for cached segments
3. Fetches only the changed segments from the server
4. Renders the new segments while preserving shared layouts
5. Updates the URL without a full page reload

Shared layouts don't re-render during navigation — only the changed page segments update. This makes navigation feel instant.

Key Interview Distinction

<Link> for declarative navigation with automatic prefetching. useRouter() for programmatic navigation in event handlers. redirect() for server-side redirects in Server Components. Navigation is client-side — shared layouts are preserved, only changed segments re-render. Use usePathname() for active link styling.