Next.js Linking and Navigating

Next.js Linking and Navigating: Fast Client-Side Transitions

Next.js linking and navigating tools move users between routes without full browser page reloads. Using <Link> from next/link and hooks from next/navigation keeps shared layouts mounted and prefetches upcoming routes in the background.

When a <Link> enters the browser viewport in production, Next.js prefetches the target route segment automatically. Clicking the link feels instant because the response is already cached.

Declarative Navigation with <Link>

Use <Link> instead of a plain <a> tag for all internal application routes. Plain <a> tags trigger full document reloads and wipe client state.

// components/MainNav.tsx
import Link from 'next/link';

export default function MainNav() {
  return (
    <nav className="flex items-center gap-6 p-4 bg-white border-b">
      <Link href="/" className="font-medium hover:text-blue-600">
        Home
      </Link>
      <Link href="/courses" className="font-medium hover:text-blue-600">
        Courses
      </Link>
      <Link href="/pricing" prefetch={false} className="font-medium hover:text-blue-600">
        Pricing
      </Link>
    </nav>
  );
}

Programmatic Redirects with useRouter

When you need to navigate after a button click or client form event, import useRouter from next/navigation inside a Client Component.

// app/login/LoginForm.tsx
'use client';

import { useRouter } from 'next/navigation';

export default function LoginForm() {
  const router = useRouter();

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const res = await fetch('/api/session', { method: 'POST' });
    if (res.ok) {
      router.push('/dashboard');
      router.refresh();
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded">
        Sign In
      </button>
    </form>
  );
}

Highlighting Active Links with usePathname

Read the active URL path with usePathname() to style the current navigation item clearly.

// components/SidebarLink.tsx
'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function SidebarLink({ href, label }: { href: string; label: string }) {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <Link
      href={href}
      className={`block px-3 py-2 rounded ${
        isActive ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-100'
      }`}
    >
      {label}
    </Link>
  );
}

Common Mistakes

• Importing useRouter from next/router: App Router components throw an error if you import next/router; always use next/navigation.
• Using useRouter for simple links: Prefer <Link> whenever possible so screen readers, right-click open, and automatic prefetching work out of the box.
• Redirecting inside Server Components with useRouter: Server Components cannot use hooks; call redirect('/login') from next/navigation instead.

Frequently Asked Questions

Should I use <Link> for external websites?

You can use a standard <a> tag with rel="noopener noreferrer" for external URLs, because Next.js cannot prefetch external sites.

How do I disable automatic prefetching on a <Link>?

Pass prefetch={false} on low-priority links like terms or privacy pages to save bandwidth on large menus.

What does router.refresh() do?

It re-fetches Server Component data for the current route and updates the UI without losing client-side state or scroll position.