Next.js Link Component and Navigation

Navigation in Next.js uses the Link component instead of a standard HTML <a> tag. The Link component does much more than just move you to another page — it prefetches pages, keeps the app fast, and handles navigation without full page reloads.

Why Not Use a Regular a Tag

A regular HTML anchor tag causes a full page reload. The browser fetches everything from scratch — HTML, CSS, JavaScript — every time you click a link. In Next.js, this defeats the purpose of client-side navigation.

REGULAR <a> TAG:
Click link → Full page reload → Fetches all resources again → Slow

NEXT.JS <Link>:
Click link → Only fetches the new page content → Fast, no full reload

Using the Link Component

Import Link from next/link and use it like an anchor tag with an href attribute.

import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  );
}

Prefetching: The Speed Secret

When a Link component appears on the screen, Next.js automatically downloads the linked page in the background. By the time you click the link, the page is already loaded and ready. This makes navigation feel instant.

PAGE LOADS WITH NAVBAR
       ↓
Next.js sees <Link href="/about">
       ↓
Downloads /about page data in the background
       ↓
USER CLICKS "About"
       ↓
/about page appears instantly (already downloaded)

Linking to Dynamic Routes

You build the href string dynamically using template literals or string concatenation.

const posts = ["hello-world", "nextjs-guide", "learn-react"];

export default function BlogList() {
  return (
    <ul>
      {posts.map((slug) => (
        <li key={slug}>
          <Link href={`/blog/${slug}`}>{slug}</Link>
        </li>
      ))}
    </ul>
  );
}

Active Link Styling

To highlight the current page link in a navigation bar, use the usePathname hook from next/navigation. It returns the current URL path.

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

export default function Navbar() {
  const pathname = usePathname();

  return (
    <nav>
      <Link
        href="/about"
        style={{ fontWeight: pathname === '/about' ? 'bold' : 'normal' }}
      >
        About
      </Link>
    </nav>
  );
}

Programmatic Navigation

Sometimes you need to navigate after an action — like after submitting a form. Use the useRouter hook from next/navigation for this.

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

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

  function handleSubmit() {
    // After login logic...
    router.push('/dashboard');
  }

  return <button onClick={handleSubmit}>Log In</button>;
}

Common Router Methods

router.push('/dashboard')    ← Go to a new page (adds to history)
router.replace('/login')     ← Go to a page (replaces current history entry)
router.back()                ← Go to previous page
router.refresh()             ← Refresh the current page

Diagram: Link vs Router

USER ACTION: Clicks a visible link
→ Use <Link href="/path">

USER ACTION: Navigate after form submit, login, or button click
→ Use useRouter() → router.push('/path')

Scroll Behavior

By default, Link scrolls to the top of the new page. You can disable this by adding scroll={false} to the Link component.

<Link href="/blog" scroll={false}>Read More</Link>

Key Takeaway

Use the Link component for all navigation between pages in your Next.js app. It prefetches pages automatically, making navigation feel instant. Use the useRouter hook when you need to navigate programmatically after an event like a form submission.

Previous lessons
Back to courses
Next lessons

Leave a Comment