Next.js Link and Navigation

Link Component

• Use Link for client-side navigation without page reload.

  import Link from "next/link";
  
  export default function Navigation() {
    return (
      <nav>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
        <Link href="/blog">Blog</Link>
      </nav>
    );
  }

• Link enables faster navigation and better performance.
• Only the needed data is fetched, not the whole page.
• Uses client-side rendering for instant transitions.
• Pass custom className or style props directly to Link.

  <Link href="/contact" className="nav-link">Contact</Link>

Dynamic Links

• Create links with dynamic parameters.

  import Link from "next/link";
  
  export default function PostList({ posts }) {
    return (
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link href={`/blog/${post.slug}`}>
              {post.title}
            </Link>
          </li>
        ))}
      </ul>
    );
  }

• Use href with objects for typed routes.

  <Link
    href={{
      pathname: "/blog/[slug]",
      query: { slug: post.slug }
    }}
  >
    {post.title}
  </Link>

Prefetching

• Prefetch pages to load them in the background.

  <Link href="/about" prefetch={true}>
    About
  </Link>

• Prefetching is enabled by default for links in viewport.
• Disable prefetching for expensive operations.

  <Link href="/api/heavy-data" prefetch={false}>
    Load Data
  </Link>

• Manually prefetch with router.prefetch().

  import { useRouter } from "next/navigation";
  
  const router = useRouter();
  
  function prefetchAbout() {
    router.prefetch("/about");
  }

Programmatic Navigation

• Use useRouter for navigating with code.

  import { useRouter } from "next/navigation";
  
  export default function LoginForm() {
    const router = useRouter();
    
    async function handleSubmit(e) {
      e.preventDefault();
      // authenticate...
      router.push("/dashboard");
    }
    
    return <form onSubmit={handleSubmit}>...</form>;
  }

• Router methods: push, replace, back, forward.

  router.push("/new-page");        // Add to history
  router.replace("/new-page");     // Replace history
  router.back();                   // Go back
  router.forward();                // Go forward

Active Links

• Highlight current page in navigation.

  "use client";
  
  import { usePathname } from "next/navigation";
  import Link from "next/link";
  
  export default function Navigation() {
    const pathname = usePathname();
    
    return (
      <nav>
        <Link
          href="/"
          className={pathname === "/" ? "active" : ""}
        >
          Home
        </Link>
        <Link
          href="/about"
          className={pathname === "/about" ? "active" : ""}
        >
          About
        </Link>
      </nav>
    );
  }

• Use usePathname to get the current route.
• Compare pathname to set active classes.

Tip: Always use Link for internal navigation — it enables better performance and a smoother user experience.

Warning: Avoid using tags for internal links as they cause full page reloads and lose state.