---

name: nextjs-server-navigation

IMPORTANT: Keep description on ONE line for Claude Code compatibility

prettier-ignore

description: Server Component navigation: for links, redirect() for conditional redirects. NO 'use client' needed for static links or server redirects. allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Next.js: Server Component Navigation

Quick Start

Server Components use DIFFERENT methods than Client Components!

Copy// app/page.tsx - Server Component (NO 'use client'!)
import Link from 'next/link';

export default async function Page() {
  const data = await fetchData();  // Can fetch!

  return (
    <div>
      <h1>Welcome</h1>
      <Link href="/dashboard">Dashboard</Link>
      <Link href={`/products/${data.id}`}>View Product</Link>
    </div>
  );
}

Conditional Redirect

Copyimport { redirect } from 'next/navigation';

export default async function ProfilePage() {
  const session = await getSession();
  if (!session) redirect('/login');  // Server-side redirect
  return <div>Welcome</div>;
}

❌ WRONG - Adding 'use client' for Navigation

Copy// ❌ WRONG
'use client';  // Don't add this just for links!
export default function Page() {
  return <Link href="/about">About</Link>;
}

✅ CORRECT - Keep as Server Component

Copy// ✅ CORRECT
import Link from 'next/link';
export default async function Page() {
  return <Link href="/about">About</Link>;
}

Notes

• No 'use client' needed: <Link> and redirect() work in Server Components
• useRouter() is client-only: Only for Client Components
• Last verified: 2025-01-11