nextjs-app-router

Enforces Next.js App Router structure for routes, layouts, providers, and middleware.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/madlado87/agentes --skill nextjs-app-router-madlado87
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-app-router
Source: https://github.com/madlado87/agentes/tree/main/.github/skills/nextjs-app-router
Command: npx skills add https://github.com/madlado87/agentes --skill nextjs-app-router-madlado87

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js App Router can be complex to implement consistently across routes, layouts, and providers; this Skill provides a governance guide to standardize structure and behavior.

Core Features & Use Cases

  • Route groups and layouts: Defines where to place pages, layouts, and APIs inside src/app and how groups isolate UI and providers.
  • Provider architecture and middleware: Describes layered providers (root vs dashboard) and middleware-based protection to enforce auth flows.
  • Thin pages and CRUD routing conventions: Promotes thin server components and intercepting routes for create/edit/detail flows with clear routing rules.

Quick Start

Look up the nextjs-app-router skill and apply its conventions to initialize a project’s app router structure.

Frequently Asked Questions about nextjs-app-router

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

FAQPage Schema
How do I structure Next.js App Router layouts and route groups consistently?

Next.js App Router layouts and route groups are structured by placing pages, layouts, and APIs inside the src/app directory, using groups to isolate UI and providers. This standardizes structure and behavior across the project.

What is the best way to organize providers and middleware in Next.js App Router?

The best way to organize providers in the Next.js App Router is by layering them, separating root providers from dashboard providers. Middleware-based protection enforces authentication flows across these layers.

How do I handle CRUD routing conventions in Next.js App Router?

CRUD routing conventions in the Next.js App Router are handled by promoting thin server components and using intercepting routes for create, edit, and detail flows with clear routing rules.

Why does my Next.js App Router project need thin server components?

Your Next.js App Router project needs thin server components to enforce route placement conventions, maintain a clear API route structure, and standardize error handling across the application.

Can I use route groups to isolate providers in a Next.js project?

Yes, you can use route groups to isolate UI and providers in a Next.js project. This approach defines where to place layouts and APIs inside the src/app directory for consistent architecture.

Does Next.js App Router middleware support auth flow protection?

Yes, Next.js App Router middleware supports auth flow protection. Middleware-based protection is applied to enforce authentication flows across layered provider architectures within the application.