nextjs-server-navigation_skill

Overview

This skill guides implementing navigation inside Next.js Server Components using the Link component, redirect(), and server actions. It explains the differences between server and client navigation methods and shows patterns that avoid unnecessary 'use client' conversions. The focus is practical: links, conditional redirects, and programmatic redirects from server actions.

How this skill works

The skill demonstrates three server-side navigation methods: <Link> for static and dynamic links, redirect() for conditional server redirects, and server actions that call redirect() after form or data mutations. It shows how server components can remain async, fetch data, and perform navigation without using client-only hooks like useRouter. Concrete examples and a decision tree clarify when to prefer server navigation over client navigation.

When to use it

• Adding links inside Server Components without client-side interactivity
• Redirecting based on server-side checks (auth, permissions, request headers)
• Performing redirects after server actions (form submissions, create/delete)
• Generating dynamic links from server-fetched data
• Keeping components server-rendered for performance and SEO

Best practices

• Do not add 'use client' just to perform navigation; use Link or redirect() instead
• Keep server components async when fetching data required for navigation targets
• Use redirect() only on the server for conditional redirects (authentication, bot checks)
• Avoid useRouter, usePathname, and other client hooks inside server components
• Type components and server actions precisely; avoid using any in TypeScript

Example use cases

• Home page that fetches data and renders Link entries to dynamic product or user pages
• Profile page that checks session cookies and redirect()s to /login if unauthenticated
• Form that calls a server action to create a resource and redirect()s to the new item
• Navigation component that maps server-fetched page list to Link elements
• Conditional bot-detection redirect based on request headers