nextjs-advanced-routing

Guide Next.js App Router patterns for route handlers, server actions, and streaming.

Updated Nov 18, 2025
One-click install
npx skills add https://github.com/mcclowes/puzzles --skill nextjs-advanced-routing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-advanced-routing
Source: https://github.com/mcclowes/puzzles/tree/main/.claude/skills/nextjs-advanced-routing
Command: npx skills add https://github.com/mcclowes/puzzles --skill nextjs-advanced-routing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides advanced Next.js App Router patterns, enabling robust architecture for route handlers, parallel routes, server actions, and streaming with Suspense. It emphasizes separating server actions from client components and using cookies securely with server actions.

Core Features & Use Cases

  • Route Handlers & Server Actions: Implement API-like endpoints with server-side mutations and form handling.
  • Parallel & Intercepting Routes: Build complex routing patterns for modals, drawers, and nested layouts.
  • Streaming & Draft Mode: Set up streaming responses and CMS draft workflows with Suspense.
  • Use Case: Use when you need server-only actions, cookies manipulation, and advanced routing scenarios in Next.js App Router.

Quick Start

Configure a Next.js App Router project to support Route Handlers, Parallel Routes, and Server Actions. Create app/[feature]/route.ts for API-style routes, implement action.ts or actions.ts with 'use server', and enable streaming with Suspense where appropriate.

Frequently Asked Questions about nextjs-advanced-routing

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

FAQPage Schema
How do I handle server-side mutations and form submissions in Next.js App Router?

Server Actions enable secure server-side mutations directly from forms and client components. Mark functions with 'use server', handle form data server-side, and manage cookies and database operations safely without exposing backend logic to the client.

What's the best way to build modals and drawers with Next.js routing?

Parallel Routes and Intercepting Routes let you render overlays without full page navigation. Define separate route segments in brackets, intercept routes to display modals over parent layouts, and use Suspense for streaming content while maintaining back-button behavior.

How do I implement Route Handlers as API endpoints in Next.js?

Route Handlers are server-side functions defined in route.ts files within the app directory. They handle HTTP requests, return responses, and support streaming, making them ideal for building RESTful endpoints and webhooks without a separate API layer.

Can I use Server Actions with cookies and form handling securely?

Yes. Server Actions support secure cookie manipulation through server-only code. Use 'use server' directives, access cookies within action functions, and avoid exposing sensitive data to client-side code, ensuring strict server/client separation.

What are Parallel Routes and when should I use them?

Parallel Routes render multiple segments simultaneously within the same layout using slot directories. Use them for independent sections like sidebars and feed, conditional content, and modals that coexist without interfering with main route navigation.

How do I set up streaming responses with Suspense in Next.js?

Streaming sends content progressively to clients using Suspense boundaries. Wrap async components in Suspense, define fallbacks, and let Next.js stream chunks as they resolve, improving perceived performance on data-heavy pages.