nextjs-app-router

Build Next.js App Router apps with route groups, server components, and security patterns.

Updated Dec 26, 2025
One-click install
npx skills add https://github.com/DeltaFoundry850/crispy-fishstick --skill nextjs-app-router-deltafoundry850
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-app-router
Source: https://github.com/DeltaFoundry850/crispy-fishstick/tree/main/.agent/skills/nextjs-app-router
Command: npx skills add https://github.com/DeltaFoundry850/crispy-fishstick --skill nextjs-app-router-deltafoundry850

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured, enterprise-grade approach to building production-ready Next.js 16 App Router applications, emphasizing route groups, server components, and security-first patterns to eliminate architectural drift.

Core Features & Use Cases

  • Route group-based surface separation to clearly delineate public, admin, and API surfaces.
  • Server components by default to optimize performance and security with minimal client-side complexity.
  • Security-first patterns including CSRF protection, tenant isolation, RBAC enforcement, and audit logging for privileged mutations.
  • Use cases include admin portals, public marketing sites, and robust API backends with strict surface boundaries.

Quick Start

Create a secure Next.js App Router project that implements route groups for public and admin surfaces, sets up a server-side authentication flow, and applies a CSP nonce-based security model.

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 a Next.js App Router project to separate public and admin surfaces?

Secure Next.js App Router applications by implementing server components by default alongside security-first patterns. This enforces RBAC, applies CSRF protection, and maintains tenant isolation for privileged mutations across admin and API surfaces.

How do I set up server-side authentication and RBAC in a Next.js App Router?

Next.js App Router supports server components by default, allowing you to execute server-side authentication, RBAC enforcement, and audit logging directly on the server. This minimizes client-side complexity while securing privileged mutations.

What is the best way to prevent architectural drift in enterprise Next.js applications?

Using route group-based surface separation alongside server components and security-first patterns prevents architectural drift in enterprise Next.js applications. This enforces strict boundaries for admin portals, public sites, and API routes.

How do I implement CSRF protection and tenant isolation in Next.js server components?

Implement CSRF protection and tenant isolation in Next.js server components by applying a CSP nonce-based security model. This pattern secures privileged mutations and API routes against cross-site request forgery.

Can I use route groups in Next.js App Router for parallel data fetching and safe data selection?

Route groups in the Next.js App Router support parallel data fetching and safe data selection within server components. This optimizes performance and security for admin portals and API routes.

Does Next.js App Router require server components for enterprise security patterns like auditing?

Server components are required to implement enterprise security patterns like auditing and RBAC in the Next.js App Router. They enable server-side authentication flows and privileged mutation checks to execute securely.