next-15-app-router

Define server and client component patterns for Next.js 15 App Router projects.

1|Updated Apr 28, 2026
One-click install
npx skills add https://github.com/yolo-labs-hq/yolo-skills-registry --skill next-15-app-router
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-15-app-router
Source: https://github.com/yolo-labs-hq/yolo-skills-registry/tree/main/skills/next-15-app-router
Command: npx skills add https://github.com/yolo-labs-hq/yolo-skills-registry --skill next-15-app-router

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Patterns for organizing Next.js 15 App Router projects, clarifying server vs client components, and handling async params and route handlers, so teams can migrate smoothly from Next.js 14.

Core Features & Use Cases

  • Distinguish server components from client components and explain the interleaving patterns to compose UI safely.
  • Describe async params and cookies/headers usage in App Router routes and route handlers.
  • Provide guidelines for revalidation, metadata generation, and deployment considerations when using App Router in production.

Quick Start

Review a Next.js 15 App Router project and align component usage with the app router guidelines.

Frequently Asked Questions about next-15-app-router

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

FAQPage Schema
How do I distinguish server components from client components in Next.js 15 App Router?

Server components fetch data and render on the server by default, while client components require explicit directives to handle interactivity. You distinguish them by applying interleaving patterns to safely compose UI and establish correct component boundaries in your App Router project.

What is the best way to handle async params and cookies in Next.js 15 App Router routes?

To handle async params and cookies in Next.js 15, you access them asynchronously within your App Router routes and route handlers. This approach replaces synchronous access methods from Next.js 14, ensuring data is correctly resolved before rendering or handling requests.

How do I migrate routing from Next.js 14 to the Next.js 15 App Router?

Migrating routing to the Next.js 15 App Router involves updating your route handlers to use async params and adjusting cookies and headers access. You align component usage with new app router guidelines and define required patterns for a smooth migration.

How do I configure revalidation and metadata generation for Next.js 15 App Router projects?

Configuring revalidation and metadata generation involves applying specific guidelines for App Router usage in production. You implement checks and recommendations to control data revalidation and dynamically generate metadata for your application routes.

Can I use Next.js 15 App Router patterns for production deployment?

Yes, Next.js 15 App Router patterns suit production deployment when you follow specific guidelines for revalidation and metadata generation. You apply defined patterns and deploy considerations to ensure correct component boundaries and stable performance.