skills.rest
khiwniti
khiwnitiCOMMUNITY
Explore all skills by this author →
GitHub

Next.js App Router Guide

Implements Next.js App Router patterns including route groups, dynamic routes, and middleware.

Updated Apr 2, 2026
Search Tags:#react#routing#middleware#next.js#server actions#app router#api routes
One-click install
npx skills add https://github.com/khiwniti/carbonscope --skill next-js-app-router-guide-khiwniti
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Next.js App Router Guide
Source: https://github.com/khiwniti/carbonscope/tree/main/ai-agent-saas-expert/skills/nextjs-app-router-guide
Command: npx skills add https://github.com/khiwniti/carbonscope --skill next-js-app-router-guide-khiwniti

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building an AI agent SaaS with Next.js requires navigating complex App Router concepts like route groups, parallel routes, intercepting routes, and the shift from middleware.ts to proxy.ts in Next.js 16, and this Skill provides working patterns for each. ## Core Features & Use Cases - Routing Patterns: Covers route groups, dynamic segments, catch-all routes, parallel routes, and intercepting routes for modal UIs. - API & Server Actions: Provides route handler templates for REST endpoints, streaming chat responses with the Vercel AI SDK, and server actions for form mutations. - Caching & Data Fetching: Explains ISR, on-demand revalidation, and Next.js 16 cache components for performance optimization. - Use Case: When building a multi-tenant AI chat dashboard, use this Skill to structure app/(dashboard) layouts with auth protection, streaming /api/chat endpoints, and modal-based agent detail views. ## Quick Start Ask the AI to scaffold a Next.js 16 App Router structure with a protected dashboard route group and a streaming chat API route.

Frequently Asked Questions about Next.js App Router Guide

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

FAQPage Schema
How do I organize routes in Next.js App Router?▼

Use route groups with parentheses like app/(dashboard) to organize files without affecting URLs. Each group can have its own layout.tsx, letting marketing pages and authenticated dashboard pages share one app directory with separate layouts.

How to create dynamic routes in Next.js App Router?▼

Create folders with bracket syntax like app/agents/[agentId]/page.tsx. In Next.js 16, params is a Promise, so await it before accessing values. Use [...slug] for catch-all and [[...slug]] for optional catch-all routes.

What is the difference between proxy.ts and middleware.ts in Next.js?▼

proxy.ts is the Next.js 16 convention replacing middleware.ts used in Next.js 13-15. Both intercept requests for auth checks and redirects, but proxy.ts is the current standard file name at the project root.

Does Next.js App Router support streaming API responses?▼

Yes, route handlers can return streaming responses. Use the Vercel AI SDK's streamText with toUIMessageStreamResponse() in app/api/chat/route.ts to stream LLM output to the client.

When should I use server actions instead of API routes?▼

Use server actions for form mutations and data writes, since they integrate with useActionState for pending states and revalidatePath for cache updates. Reserve API routes for webhooks and external integrations.

Related Skills

Explore More Software Engineering Skills→
Tonybleything76Tonybleything76

SaaS Scaffolder

Generate a full-stack SaaS scaffold with Next.js 14+, TypeScript, and Tailwind CSS.

Community
Advanced
koralliskorallis
90

vercel-deployment

Deploy Next.js applications to Vercel with preview deployments and environment variables.

Community
Intermediate
jawwad-alijawwad-ali
4

nextjs-app-router

Guide Next.js App Router implementation with routing, layouts, and data flows.

Community
Advanced
abereghiciabereghici

lifecycle/migrate-from-react-router

Migrate React Router v7 projects to TanStack Router route definitions and navigation APIs.

Community
Intermediate