Hook Next.js Code Quality Enforcer — best practices Next.js automáticas (1,395 installs)

Qué es#

1,395 installs — #3 del catálogo entero. Razón: Next.js es el framework más popular para frontend AI-assisted, y enforce sus convenciones específicas es no trivial.

Después de cada edit, el hook valida:

• File structure (app/ vs pages/, layouts anidados, route groups)
• Component patterns (Server vs Client, naming conventions)
• TypeScript usage (proper types, no any sin razón)
• Best practices generales de Next.js

Hook event: PostToolUse.

Tabla resumen#

Cómo se instala#

npx claude-code-templates@latest --hook development-tools/nextjs-code-quality-enforcer

Para Claude:

Instalé el hook development-tools/nextjs-code-quality-enforcer.
Mostrame qué reglas valida (file structure, components, TS). Probá
con un edit que viole convention común — debería warn.

Qué podés hacer con esto#

Mantener convención Next.js#

Claude tiende a mezclar App Router y Pages Router si no está claro. El hook detecta inconsistencias.

Server vs Client Components#

El bug más común en App Router: importar código 'use client' desde un Server Component. El hook lo detecta.

TypeScript estricto#

Si tu proyecto es TS strict, el hook valida que Claude no introduzca any sin razón o tipos incompletos.

Combo con Lint On Save#

Lint general + Next.js-specific = doble cobertura.

Combo con DeepGraph Next.js MCP#

Hook valida cada edit. DeepGraph te da view del proyecto completo. Combinados: micro + macro analysis.

Cuándo NO conviene#

Bajalo de la fuente#

• Ficha en aitmpl.com: Next.js Code Quality Enforcer Hook — comando exacto.
• Config JSON: nextjs-code-quality-enforcer.json.

Recursos relacionados#

• DeepGraph Next.js MCP — análisis macro del proyecto Next.js.
• Lint On Save Hook — lint general, combinable.
• Format JavaScript Files Hook — format pipeline pre-lint.