Navigation

~20 min · Link, useRouter, redirect, prefetch

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

The Link component does more than href

<Link> performs client-side transitions, prefetches the destination route, and preserves layout state. Use it for any in-app navigation. Plain tags trigger full reloads.

Programmatic navigation

Inside Client Components, useRouter() from next/navigation lets you navigate from code. Server Components can call redirect().

The hooks you actually use

Hook	Returns	Where
`useRouter()`	Router methods (`push`, `replace`, `refresh`)	Client
`usePathname()`	Current pathname string	Client
`useSearchParams()`	URLSearchParams	Client
`useSelectedLayoutSegment()`	Active child segment of the current layout	Client

Code

Link + prefetch·tsx

import Link from 'next/link';

export function Nav() {
  return (
    <nav className="flex gap-3">
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog/hello-world">Blog</Link>
      <Link href="/dashboard" prefetch={false}>
        Dashboard (no prefetch)
      </Link>
    </nav>
  );
}

Programmatic push from a form·tsx

'use client';
import { useRouter } from 'next/navigation';
import { useTransition } from 'react';

export function LoginForm() {
  const router = useRouter();
  const [pending, start] = useTransition();

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        start(async () => {
          const ok = await login();
          if (ok) router.push('/dashboard');
        });
      }}
    >
      <button disabled={pending}>{pending ? 'Signing in&hellip;' : 'Sign in'}</button>
    </form>
  );
}

Server-side redirect with no client JS·tsx

import { redirect } from 'next/navigation';

export default async function Page() {
  const session = await getSession();
  if (!session) redirect('/login');
  return <Dashboard session={session} />;
}

External links

Exercise

Replace every <a href=…> in your app with <Link>. Add a server-side redirect on a route that requires auth, and a client-side router.push after a successful form submit.