nextjs-app-structure-guard

Enforce Next.js App Router server/client boundaries and caching directives.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Align Next.js App Router code with the framework's rendering model to prevent accidental client components in server code, reduce client bundle size, and avoid leaking server secrets.

Core Features & Use Cases

  • Enforces that Server Components are default and 'use client' is placed only on the smallest leaves that require it.
  • Prevents importing server-only modules (fs, database clients, secret managers) into client components.
  • Keeps route handlers thin by delegating business logic to services and returning typed responses.
  • Narrows middleware to lightweight tasks (auth checks, redirects, headers) without DB access or business logic.
  • Validates server actions input with schema validation and re-verifies authorization at the top.
  • Ensures explicit caching policies for data fetches and cache handlers to avoid stale data.
  • Promotes pure generateMetadata / generateStaticParams functions to avoid side effects and secrets.

Quick Start

Review an App Router file and apply the guard rules to ensure server/client boundaries are respected and the code remains testable.

Frequently Asked Questions about nextjs-app-structure-guard

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

FAQPage Schema
How do I prevent server-only modules from leaking into Next.js client components?

Next.js App Router rendering boundaries keep server-only modules out of client components by placing 'use client' only on smallest leaf nodes. This prevents importing database clients or secret managers into client bundles, reducing bloat and avoiding leaked secrets.

What is the best way to structure Next.js App Router route handlers and middleware?

The best way to structure Next.js App Router route handlers and middleware is to keep route handlers thin by delegating business logic to services, and narrow middleware to lightweight tasks like auth checks and redirects without database access.

How do I validate input in Next.js server actions and ensure proper authorization?

To validate input in Next.js server actions, use schema validation for incoming data and re-verify user authorization at the top of the action. This ensures secure, testable services while maintaining proper server/client boundary enforcement.

Why does Next.js App Router code need explicit caching directives for data fetches?

Next.js App Router code needs explicit caching directives for data fetches to avoid serving stale data to users. Enforcing explicit cache policies on fetches and cache handlers ensures data freshness and aligns with the framework's rendering model.

Can I use business logic or database access inside Next.js middleware?

You should not use business logic or database access inside Next.js middleware. Middleware should be narrowed to lightweight tasks such as authentication checks, redirects, and header manipulation to maintain performance and proper App Router boundaries.

How do I keep Next.js generateMetadata and generateStaticParams functions pure?

To keep Next.js generateMetadata and generateStaticParams functions pure, avoid side effects and secret access within them. Enforcing pure functions in these App Router segments ensures testable, secure server-side rendering without unexpected state mutations.