Next.js Course
Next.js
/
Beginner

Navigation & Link Component

Definition

The methods used to navigate between routes in a Next.js application, primarily using the `<Link>` component and the `useRouter` hook.

Explain Like I'm New

Never use a standard HTML `<a href="/about">` tag in Next.js. It forces the browser to do a full, slow page reload. Use Next.js `<Link href="/about">` instead. It intercepts the click, fetches the new page in the background instantly, and feels like a native mobile app.

Real World Example

Building a Navbar where clicking 'Contact' instantly swaps the page content without the browser tab spinning.

Common Use Cases

  • •Internal linking
  • •Programmatic navigation

Interactive Example

// 1. Declarative Navigation (Clicking links)
import Link from 'next/link';

export default function Navbar() {
  return (
    <nav>
      {/* ✅ Do this for internal links */}
      <Link href="/about">About Us</Link>
      
      {/* ❌ Never do this for internal links (causes full reload) */}
      <a href="/contact">Contact</a>
    </nav>
  );
}

// 2. Programmatic Navigation (After an action, like submitting a form)
'use client'; // Must be a client component to use hooks!
import { useRouter } from 'next/navigation';

export default function LoginButton() {
  const router = useRouter();
  
  const handleLogin = () => {
    // ... authenticate user ...
    router.push('/dashboard'); // Instantly redirects the user
  };
  
  return <button onClick={handleLogin}>Login</button>;
}

Interview Questions

basic

  • What component should you use for all internal navigation in Next.js?

intermediate

  • What is 'Prefetching', and how does the `<Link>` component use it?

Flash Cards

Question

Which component?

Click to reveal answer
Answer

The `<Link>` component imported from `next/link`.

Question

What is prefetching?

Click to reveal answer
Answer

When a `<Link>` scrolls into the user's viewport, Next.js secretly downloads the code for that page in the background. By the time the user actually clicks it, the page loads instantly in 0 milliseconds.