Agent skill · software engineering · wsimmonds
nextjs-server-navigation
Guide for implementing navigation in Next.js Server Components using Link component and redirect() function. Covers the difference between server and client navigation methods. Use when adding links, redirects, or navigation logic in server components without converting them to client components unnecessarily.
Why this skill is useful
Provides specific patterns and examples for implementing navigation in Next.js Server Components that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2025-10-24. 109 stars on the source repository.
What this skill does
Next.js: Server Component Navigation Pattern ⚠️ CRITICAL RULE Server Components use DIFFERENT navigation methods than Client Components! When requirements call for server-rendered navigation—for example, linking to other pages, redirecting after a check, or demonstrating routing patterns—prefer <Link> and redirect() within Server Components. You still avoid 'use client' unless a client-only API is involved. The Pattern Scenario: build a server component that demonstrates proper navigation patterns ✅ CORRECT Solution: ❌ WRONG Solution: Server Navigation Methods Method 1: Link Component (Recommended for Links) Key Points: ✅ Works in Server Components (no 'use client' needed) ✅ Can be async function ✅ Can fetch data ✅ No hooks required Method 2: redirect() Function (For Conditional Redirects) When to use redirect(): Conditional redirects based on server-side data Authentication checks Permission validation Data-based routing Method 3: Button with Server Action Complete Example: Navigation Patterns TypeScript: NEVER Use any Type Server vs Client Navigation Comparison Feature Server Component Client Component --------- ----------------- ------------------ <Link> ✅ Yes ✅ Yes redirect() ✅ Yes ❌ No useRouter() ❌ No ✅ Yes usePathname() ❌ No ✅ Yes async function ✅ Yes ❌ No 'use client' ❌ No ✅ Yes Common Mistakes to Avoid ❌ Mistake 1: Adding 'use client' for Navigation ❌ Mistake 2: Using useRouter() in Server Component ❌ Mistake 3: Making Component Client-Side for Simple Navigation Advanced Patterns Programmatic Navigation in Server Actions Multiple Links in Server Component Quick Decision Tree When to Use Client-Side Navigation Instead Use Client Components ('use client' + useRouter()) ONLY when you need: Programmatic navigation based on client state Navigation after client-side animations Browser-only APIs (window, localStorage) React hooks (useState, useEffect) For everything else, use Server Component navigation! Quick Checklist When you see "demonstrates navigation patter …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wsimmonds/nextjs-server-navigation