Server Component navigation: <Link> for links, redirect() for conditional redirects. NO 'use client' needed for static links or server redirects.
Server Components use DIFFERENT methods than Client Components!
| Method | Server Component | Client Component |
|---|---|---|
| Links | <Link> ✅ | <Link> ✅ |
| Redirect | redirect() ✅ | ❌ No |
| Router hook | ❌ No | useRouter() ✅ |
// 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>
);
}
import { 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
'use client'; // Don't add this just for links!
export default function Page() {
return <Link href="/about">About</Link>;
}
// ✅ CORRECT
import Link from 'next/link';
export default async function Page() {
return <Link href="/about">About</Link>;
}
<Link> and redirect() work in Server Components