# Nextjs Guard

> Use after writing or modifying Next.js App Router code, before committing, or when reviewing a Next.js PR — "validate the Next.js code", "nextjs guard", "check the app router changes". Loads the Next.js skill set plus react-guard and validates routing, RSC boundaries, and data patterns. NOT for plain React without Next.js (react-guard alone) and not for the full-stack Supabase pipeline (nextjs-supabase-guard).

- Skill: `b4r7x/nextjs-guard` (Agent Skill)
- Install (CLI): `npx skillmds@latest add b4r7x/nextjs-guard`
- Raw SKILL.md: https://api.skillmd.com/api/skills/b4r7x/nextjs-guard/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: b4r7x (https://skillmd.com/u/b4r7x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/b4r7x/nextjs-guard

---


# Next.js Guard

Validates Next.js App Router code against best practices. Requires React knowledge (loads react-guard).

## When to Use

- After writing or modifying Next.js routes, layouts, middleware, or server code
- Before committing Next.js code changes
- When reviewing Next.js PRs

## Workflow

### Phase 1: Load Skills

Load ALL of the following skills using the Skill tool:

1. `react-guard` — React validation (loads its own React skills)
2. `next-best-practices` — file conventions, RSC, async patterns, data patterns
3. `nextjs` — comprehensive Next.js reference
4. `routing-middleware` — Vercel routing middleware patterns
5. `tailwind-patterns` — Tailwind CSS v4 (if className/CSS changed)

### Phase 2: Validate

For each changed file, check:

**BLOCKER:**
- `'use client'` on a component that doesn't need interactivity
- Business logic in route files (`app/`) — should be in `features/`
- Async client components (invalid in RSC)
- Non-serializable props passed from Server to Client components
- Missing Zod validation in Server Actions

**WARNING:**
- Data waterfalls (sequential fetches that could be parallel)
- Missing `revalidatePath()` before `redirect()` in Server Actions
- Throwing exceptions from Server Actions (return errors as data)
- Heavy components not using `next/dynamic` for lazy loading
- Barrel file imports (import directly instead)

**INFO:**
- Missing metadata/OG configuration
- Images not using `next/image`
- Scripts not using `next/script`

### Phase 3: Report

Output findings grouped by severity with file:line references.