skills.rest
dthompsonfl
dthompsonflCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-app-router

Build Next.js 16 App Router applications with route groups and server components.

Updated Dec 26, 2025
Search Tags:#security#multi-tenant#nextjs#app-router#server-components#admin-portal#route-groups
One-click install
npx skills add https://github.com/dthompsonfl/crispy-fishstick --skill nextjs-app-router-dthompsonfl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router
Source: https://github.com/dthompsonfl/crispy-fishstick/tree/main/.agent/skills/nextjs-app-router
Command: npx skills add https://github.com/dthompsonfl/crispy-fishstick --skill nextjs-app-router-dthompsonfl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building production-grade Next.js 16 App Router applications with clear surface separation, secure routing, and scalable architecture to avoid monolithic, fragile deployments.

Core Features & Use Cases

  • Route groups for surface boundaries (site/admin) to prevent leakage between public and protected areas.
  • Server Components by default with per-request security checks and RBAC enforcement.
  • API routes with CSRF protection, tenant isolation, and audit logging for compliant admin operations.
  • Advanced patterns: proxy-based security boundary, dynamic route segments, parallel data fetching, and error handling best practices.
  • Real-world use cases include admin dashboards, public marketing sites, and multi-tenant APIs that require strict data isolation.

Quick Start

Set up a secure Next.js 16 App Router project with surface-separated routes and server components, and implement a basic admin portal using the patterns described.

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 routes?▼

Route groups provide surface boundaries in the Next.js App Router to prevent leakage between public and protected areas. Organize directories like (site) and (admin) to isolate distinct application surfaces while sharing a root layout.

How do I enforce server-side authentication and RBAC in Next.js server components?▼

Server components enforce per-request security checks and RBAC directly during rendering. Implement a proxy-based security boundary to validate user permissions server-side before any data fetching occurs.

What is the best way to achieve multi-tenant data isolation in Next.js API routes?▼

Multi-tenant data isolation in Next.js API routes is achieved by enforcing tenant boundaries within the API surface. Combine this with CSRF protection and audit logging to maintain compliant admin operations.

Does the Next.js App Router support parallel data fetching and dynamic route segments?▼

Yes, the Next.js App Router supports parallel data fetching and dynamic route segments. These advanced patterns enable efficient data loading and flexible URL structures for production-grade routing architectures.

When should I use route groups instead of standard directories in Next.js?▼

Use route groups for logical surface separation without affecting the URL path. They are essential for preventing monolithic, fragile deployments and organizing complex application architectures with clear security boundaries.

Related Skills

Explore More Software Engineering Skills→
rhixecompanyrhixecompany

banking-agent-standards

Enforce coding standards in Next.js 16 Banking apps with TypeScript, Drizzle ORM, and PostgreSQL.

Community
Advanced
jangtrinhjangtrinh

vercel-deployment

Automate Vercel deployment planning and configuration for Next.js apps.

Community
Intermediate
zinohomezinohome
1

multi-tenant-safety-checker

Enforce PostgreSQL Row Level Security policies for multi-tenant data isolation.

Community
Advanced
kevinreberkevinreber
3

route

Create Remix routes with loaders and actions for data handling.

Community
Advanced