1. Home
Technology / Next.js

Next.js Link and Navigation

Use the Link component and useRouter for fast client-side navigation in Next.js.

TL;DR

  1. 01Use Link for client-side navigation instead of <a> tags.
  2. 02Prefetch future pages automatically when links enter the viewport.
  3. 03Use useRouter hook to navigate programmatically after user actions.
Jump to section

Tips

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

Warnings

  1. 01Avoid using <a> tags for internal links as they cause full page reloads and lose state.

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.