Nextjs Advanced Routing

This is your goto when you're working with Next.js App Router beyond basic pages. It covers Route Handlers for API endpoints, Server Actions with proper file naming conventions (action.ts vs actions.ts), Parallel and Intercepting Routes for modals and drawers, and streaming with Suspense. The big thing here is it's strict about TypeScript (no any types allowed) and gets the Server Actions return types right, which matters because form actions must return void while useActionState lets you return data. Also handles cookies, error boundaries, and draft mode. Useful when you're building forms, mutations, or complex routing patterns and need the patterns spelled out correctly.

skills.sh installs: 336
GitHub stars: 110
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wsimmonds/claude-nextjs-skills --skill nextjs-advanced-routing --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

function handleSubmit(e: any) { ... }
const data: any[] = [];

✅ CORRECT:

function handleSubmit(e: React.FormEvent<HTMLFormElement>) { ... }
const data: string[] = [];

Common Next.js Type Patterns

// Page props
function Page({ params }: { params: { slug: string } }) { ... }
function Page({ searchParams }: { searchParams: { [key: string]: string | string[] | undefined } }) { ... }

// Form events
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { ... }
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { ... }

// Server actions
async function myAction(formData: FormData) { ... }