Hackermanishackerman Claude Skills Vault Nextjs Senior Dev

name: nextjs-senior-dev description: Senior Next.js 15+/16 Engineer skill for App Router. Use when scaffolding production apps, enforcing RSC patterns, auditing codebases, or optimizing performance. author: George Khananaev version: 1.3.0

Next.js Senior Developer

Transform into Senior Next.js 15+/16 Engineer for production-ready App Router applications.

When to Use

• Scaffolding new Next.js App Router projects
• RSC vs Client Component decisions
• Server Actions and data fetching patterns
• Performance optimization (CWV, bundle, caching)
• Middleware and authentication setup
• Next.js 15/16 migration or audit

Version Notes

Triggers

Reference Files (20 Total)

Load based on task context:

Core References

Architecture & Quality

Features & Integrations

DevOps & Migration

Core Tenets

1. Server-First

Default to Server Components. Use Client only when required.

RSC when: data fetching, secrets, heavy deps, no interactivity
Client when: useState, useEffect, onClick, browser APIs

2. Component Archetypes

3. 7-Step Server Action Security

"use server"
// 1. Rate limit (IP/user)
// 2. Auth verification
// 3. Zod validation (sanitize errors!)
// 4. Authorization check (IDOR prevention)
// 5. Mutation
// 6. Granular revalidateTag() (NOT revalidatePath)
// 7. Audit log (async)

4. Data Fetching Strategy

Static → generateStaticParams + fetch
ISR → fetch(url, { next: { revalidate: 60 }})
Dynamic → fetch(url, { cache: 'no-store' })
Real-time → Client fetch (SWR)

Next.js 15 Change: fetch is UNCACHED by default (opposite of 14).

5. Caching

Prefer revalidateTag() over revalidatePath() to avoid cache storms.

6. Feature-Sliced Architecture

For large apps (50+ routes), use domain-driven structure:

src/
├── app/           # Routing only
├── components/    # Shared UI (ui/, shared/)
├── features/      # Business logic per domain
│   └── [feature]/
│       ├── components/
│       ├── actions/
│       ├── queries/
│       └── hooks/
├── lib/           # Global utilities
└── types/         # Global types

7. Component Sharing Rules

8. State Management Hierarchy

Rule: Prefer URL state for shareable/bookmarkable state.

9. DRY with createSafeAction

// lib/safe-action.ts - Reuse for all Server Actions
export const createPost = createSafeAction(schema, handler, {
  revalidateTags: ["posts"]
})

Eliminates duplicate auth/validation/error handling.

Anti-Patterns

Middleware: Deny by Default

// middleware.ts - Public routes MUST be allowlisted
const publicRoutes = ['/login', '/register', '/api/health']
if (!publicRoutes.some(r => pathname.startsWith(r))) {
  // Require auth
}

CRITICAL: Upgrade to Next.js 15.2.3+ (CVE-2025-29927 fix).

Scripts

Templates

Assets

Quick Reference: Senior Code Review

Before merging any PR, verify:

Performance

• No unnecessary "use client"
• Images use next/image with dimensions
• Heavy components dynamic imported
• Parallel fetching (Promise.all)

Security

• Server Actions validate with Zod
• Auth in actions (not just middleware)
• IDOR prevention (user owns resource)
• No secrets in client bundles

Architecture

• Components in correct layer
• No cross-feature imports
• DRY patterns used (createSafeAction)
• URL state for shareable state

Quality

• No any types
• Error boundaries present
• Loading states for async
• Accessibility (semantic HTML, alt text)

Converted and distributed by TomeVault — claim your Tome and manage your conversions.