Agent skill · software engineering · wsimmonds
nextjs-advanced-routing
Guide for advanced Next.js App Router patterns including Route Handlers, Parallel Routes, Intercepting Routes, Server Actions, error boundaries, draft mode, and streaming with Suspense. CRITICAL for server actions (action.ts, actions.ts files, 'use server' directive), setting cookies from client components, and form handling. Use when requirements involve server actions, form submissions, cookies, mutations, API routes, `route.ts`, parallel routes, intercepting routes, or streaming. Essential for separating server actions from client components.
Why this skill is useful
Provides specific patterns and practices for advanced Next.js routing that the AI wouldn't reliably generate on its own.
What it needs
About 11k tokens when loaded. Last updated 2025-10-24. 109 stars on the source repository.
What this skill does
Next.js Advanced Routing Overview Provide comprehensive guidance for advanced Next.js App Router features including Route Handlers (API routes), Parallel Routes, Intercepting Routes, Server Actions, error handling, draft mode, and streaming with Suspense. TypeScript: NEVER Use any Type CRITICAL RULE: This codebase has @typescript-eslint/no-explicit-any enabled. Using any will cause build failures. ❌ WRONG: ✅ CORRECT: Common Next.js Type Patterns When to Use This Skill Use this skill when: Creating API endpoints with Route Handlers Implementing parallel or intercepting routes Building forms with Server Actions Setting cookies or handling mutations Creating error boundaries Implementing draft mode for CMS previews Setting up streaming and Suspense boundaries Building complex routing patterns (modals, drawers) ⚠️ CRITICAL: Server Action File Naming and Location When work requirements mention a specific filename, follow that instruction exactly. If no name is given, pick the option that best matches the project conventions—app/actions.ts is a safe default for collections of actions, while app/action.ts works for a single form handler. Choosing between action.ts and actions.ts Match existing patterns: Check whether the project already has an actions file and extend it if appropriate. Single vs multiple exports: Prefer action.ts for a single action, and actions.ts for a group of related actions. Explicit requirement: If stakeholders call out a specific name, do not change it. Location guidelines Server actions belong under the app/ directory so they can participate in the App Router tree. Keep the file alongside the UI that invokes it unless shared across multiple routes. Avoid placing actions in lib/ or utils/ unless they are triggered from multiple distant routes and remain server-only utilities. Example placement Example: Creating action.ts Example: Creating actions.ts Remember: When a project requirement spells out an exact filename, mirror it precisely. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wsimmonds/nextjs-advanced-routing