nextjs-server-navigation

// app/page.tsx
'use client';  // ❌ NO! Server components don't need this for navigation!
 
import { useRouter } from 'next/navigation';  // ❌ Wrong for server components
 
export default function Page() {
  const router = useRouter();  // ❌ This is client-side navigation
  // ...
}

// app/page.tsx
import Link from 'next/link';
 
export default async function Page() {
  // Can still fetch data - this is a server component!
  const data = await fetchData();
 
  return (
    <div>
      <h1>Welcome</h1>
 
      {/* Simple navigation link */}
      <Link href="/about">About Us</Link>
 
      {/* Dynamic link */}
      <Link href={`/products/${data.productId}`}>View Product</Link>
 
      {/* Link with styling */}
      <Link href="/dashboard" className="btn-primary">
        Dashboard
      </Link>
    </div>
  );
}

// app/profile/page.tsx
import { redirect } from 'next/navigation';
import { cookies } from 'next/headers';
 
export default async function ProfilePage() {
  // Check authentication
  const cookieStore = await cookies();
  const session = cookieStore.get('session');
 
  // Redirect if not authenticated
  if (!session) {
    redirect('/login');
  }
 
  // Fetch user data
  const user = await fetchUser(session.value);
 
  return <div>Welcome, {user.name}!</div>;
}

// app/page.tsx
import { logout } from './actions';
 
export default async function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
 
      <form action={logout}>
        <button type="submit">Logout</button>
      </form>
    </div>
  );
}
 
// app/actions.ts
'use server';
 
import { redirect } from 'next/navigation';
 
export async function logout() {
  // Clear session
  await clearSession();
 
  // Redirect to login page
  redirect('/login');
}

// app/page.tsx - Demonstrates multiple navigation patterns
 
import Link from 'next/link';
import { redirect } from 'next/navigation';
import { headers } from 'next/headers';
 
export default async function HomePage() {
  // Server-side logic
  const headersList = await headers();
  const userAgent = headersList.get('user-agent');
 
  // Conditional redirect example
  if (userAgent?.includes('bot')) {
    redirect('/bot-page');
  }
 
  return (
    <div>
      <h1>Welcome to Our App</h1>
 
      {/* Navigation Links */}
      <nav>
        <Link href="/about">About</Link>
        <Link href="/products">Products</Link>
        <Link href="/contact">Contact</Link>
      </nav>
 
      {/* Button-style link */}
      <Link href="/get-started" className="button">
        Get Started
      </Link>
 
      {/* Dynamic link */}
      <Link href={`/user/${123}`}>View Profile</Link>
    </div>
  );
}

// ❌ WRONG
function handleClick(e: any) { ... }
 
// ✅ CORRECT - Not needed in server components!
// Server components don't have onClick handlers
 
// For client components with handlers:
'use client';
function handleClick(e: React.MouseEvent<HTMLButtonElement>) { ... }

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

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

// ❌ WRONG
import { useRouter } from 'next/navigation';  // This is for CLIENT components!
 
export default async function Page() {
  const router = useRouter();  // ERROR! Can't use hooks in server components
  // ...
}

// ✅ CORRECT - Use Link or redirect()
import Link from 'next/link';
import { redirect } from 'next/navigation';
 
export default async function Page() {
  // Conditional redirect
  const shouldRedirect = await checkSomething();
  if (shouldRedirect) {
    redirect('/other-page');
  }
 
  // Or navigation links
  return <Link href="/other-page">Go</Link>;
}

// ❌ WRONG - Loses server component benefits!
'use client';
 
export default function Page() {
  return (
    <div>
      <Link href="/dashboard">Dashboard</Link>
    </div>
  );
}

// ✅ CORRECT - Keep it as a server component!
export default async function Page() {
  // Can now fetch data server-side
  const data = await fetchData();
 
  return (
    <div>
      <Link href="/dashboard">Dashboard</Link>
      <p>{data.message}</p>
    </div>
  );
}

// app/page.tsx
import { createPost } from './actions';
 
export default async function Page() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <button type="submit">Create Post</button>
    </form>
  );
}
 
// app/actions.ts
'use server';
 
import { redirect } from 'next/navigation';
 
export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
 
  // Save to database
  const post = await db.posts.create({ title });
 
  // Redirect to the new post
  redirect(`/posts/${post.id}`);
}

// app/page.tsx
import Link from 'next/link';
 
export default async function NavigationPage() {
  const pages = await fetchPages();
 
  return (
    <nav>
      <h2>Site Navigation</h2>
      <ul>
        {pages.map((page) => (
          <li key={page.id}>
            <Link href={`/pages/${page.slug}`}>
              {page.title}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}

Need navigation in a component?
│
├─ Is it a Server Component (no 'use client')?
│  ├─ Static link → Use <Link>
│  ├─ Conditional redirect → Use redirect()
│  └─ Form submission → Server Action with redirect()
│
└─ Is it a Client Component ('use client')?
   ├─ Link → Use <Link> (works in both!)
   └─ Programmatic → Use useRouter()