Link & Navigation

Next.js · Reference cheat sheet

📋 Overview

Use next/link for client-side soft navigation and next/navigation hooks for programmatic routing in the App Router. Prefer Link over raw <a> for internal routes.

🔧 Core concepts

💡 Examples

Basic Link:

import Link from "next/link";

export function Nav() {
  return <Link href="/docs">Docs</Link>;
}

Programmatic navigation (Client):

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

export function Go() {
  const router = useRouter();
  return <button onClick={() => router.push("/dashboard")}>Open</button>;
}

Server redirect:

import { redirect } from "next/navigation";

export default function Page() {
  redirect("/login");
}

⚠️ Pitfalls

• useRouter from next/router vs next/navigation — wrong import breaks App Router pages.
• useSearchParams() can force a client Suspense boundary — wrap accordingly.
• External URLs should use <a> (or Link with absolute URL); don't treat them like soft navigations for SEO-critical exit links without care.

🔗 Related

• app_router.md
• pages_router.md
• middleware.md
• server_components.md