skills.rest
xabierlameiro
xabierlameiroCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-navigation-functions

Document Next.js 16 App Router navigation functions and hooks.

Updated Mar 8, 2026
Search Tags:#routing#next.js#navigation#client-side#app router#server-side#redirect
One-click install
npx skills add https://github.com/xabierlameiro/price-tracker --skill nextjs-navigation-functions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-navigation-functions
Source: https://github.com/xabierlameiro/price-tracker/tree/main/.agents/skills/nextjs-navigation-functions
Command: npx skills add https://github.com/xabierlameiro/price-tracker --skill nextjs-navigation-functions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive reference for Next.js 16 App Router navigation functions, enabling developers to understand and implement client-side and server-side routing, redirects, and error handling.

Core Features & Use Cases

  • Server-Side Navigation: Learn to use redirect, permanentRedirect, notFound, forbidden, and unauthorized in Server Components and Server Actions.
  • Client-Side Navigation Hooks: Understand useRouter, usePathname, useSearchParams, and useParams for dynamic navigation in Client Components.
  • Use Case: When building a Next.js application, you need to redirect users after a successful form submission or display a custom 404 page when a resource is not found. This Skill guides you on how to implement these scenarios correctly.

Quick Start

Use the nextjs-navigation-functions skill to implement a server-side redirect to the login page if a user is not authenticated.

Frequently Asked Questions about nextjs-navigation-functions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I redirect users in Next.js App Router after a server action?▼

Next.js provides the `useRouter`, `usePathname`, `useSearchParams`, and `useParams` hooks for client-side navigation. You must implement these within Client Components to manage dynamic routing and access the current URL parameters.

What is the difference between redirect and permanentRedirect in Next.js?▼

Yes, you can display a custom 404 page using the `notFound` function in Next.js App Router. Call this server-side function within Server Components or Server Actions to trigger the not-found UI when a specific resource is missing.

Does Next.js useSearchParams require a Suspense boundary?▼

Yes, Next.js `useSearchParams` requires a Suspense boundary during static rendering. Wrapping the component in Suspense prevents client-side hydration issues and ensures proper programmatic URL changes during the App Router build process.

How do I handle unauthorized access in Next.js App Router?▼

To handle unauthorized access in the Next.js App Router, use the `unauthorized` and `forbidden` server-side functions. These functions allow you to trigger specific error UIs when a user lacks permissions during server-side routing.

Related Skills

Explore More Software Engineering Skills→
thongdn-itthongdn-it
3

nextjs

Apply Next.js 16 App Router optimization guidelines for caching, server components, and routing.

Community
Advanced
mnishanth02mnishanth02

clerk-tanstack-patterns

Add Clerk authentication guards to TanStack Router routes with server-side verify and redirect.

Community
Intermediate
yusufcmgyusufcmg
1

nextjs-app-router-patterns

Provide Next.js 14+ App Router patterns for Server Components, Server Actions, and streaming.

Community
Advanced
ali-masterali-master
8

orpc-nextjs

Integrate oRPC into Next.js App Router and Pages Router applications.

Community
Intermediate