reviewing-nextjs-16-patterns
Review code for Next.js 16 compliance - security patterns, caching, breaking changes. Use when reviewing Next.js code, preparing for migration, or auditing for violations.
Install
mkdir -p .claude/skills/reviewing-nextjs-16-patterns && curl -L -o skill.zip "https://mcp.directory/api/skills/download/317" && unzip -o skill.zip -d .claude/skills/reviewing-nextjs-16-patterns && rm skill.zipInstalls to .claude/skills/reviewing-nextjs-16-patterns
About this skill
Next.js 16 Patterns Review
Comprehensive review for Next.js 16 compliance covering security vulnerabilities, caching patterns, breaking changes, and migration readiness.
Review Process
For comprehensive security review patterns, use the reviewing-security skill from the review plugin. For dependency auditing, use the reviewing-dependencies skill from the review plugin.
1. Security Audit
CVE-2025-29927 - Server Action Authentication
Check all Server Actions for proper authentication:
# Find all Server Actions
grep -r "use server" --include="*.ts" --include="*.tsx" --include="*.js" --include="*.jsx"
For each Server Action verify:
- Authentication check at function start
- Authorization validation before data access
- No reliance on client-side validation only
- Proper error handling without leaking sensitive data
Middleware Security
# Find middleware files
find . -name "middleware.ts" -o -name "middleware.js"
Verify:
- Authentication logic present in middleware
- Protected routes defined in config.matcher
- No authentication logic removed in Next.js 16 migration
- Proper redirect handling for unauthorized access
Server Component Data Access
# Find async Server Components
grep -r "export default async function" app/
Check each Server Component:
- Session validation before data queries
- User context verified before personalized data
- No direct database queries without auth checks
- Proper error boundaries for auth failures
2. Caching Patterns
use cache Adoption
# Find fetch calls that should use cache
grep -r "fetch(" --include="*.ts" --include="*.tsx"
# Find functions that should be cached
grep -r "export async function" --include="*.ts"
Verify:
-
use cachedirective for cacheable functions - Proper cache tags with
cacheTag()for revalidation - Cache lifecycle control with
cacheLife() - No unstable_cache in new code
- fetch() caching replaced with use cache
Cache Lifecycle Configuration
Check for proper cache profiles:
-
cacheLife('seconds')for rapidly changing data -
cacheLife('minutes')for moderate update frequency -
cacheLife('hours')for stable content -
cacheLife('days')for rarely changing data -
cacheLife('weeks')for static content - Custom profiles defined in next.config.js if needed
Revalidation Strategy
# Find revalidation calls
grep -r "revalidateTag\|revalidatePath" --include="*.ts" --include="*.tsx"
Verify:
- revalidateTag() matches cacheTag() definitions
- revalidatePath() used for page-level invalidation
- No orphaned cache tags
- Proper error handling in revalidation
3. Breaking Changes
Async Request APIs
# Find synchronous API usage
grep -r "cookies()\|headers()\|params\|searchParams" --include="*.ts" --include="*.tsx"
Check for required async usage:
-
await cookies()in Server Components/Actions -
await headers()in Server Components/Actions -
await paramsin page/layout/route components -
await searchParamsin page components - React.use() wrapper in Client Components if needed
Middleware to Proxy Migration
# Check for removed middleware patterns
grep -r "NextResponse.rewrite\|NextResponse.redirect" middleware.ts
Verify migration:
- Simple rewrites moved to next.config.js redirects/rewrites
- Complex logic converted to Middleware Proxies
- Authentication logic preserved
- Header manipulation handled correctly
Route Handler Changes
# Find route handlers
find app -name "route.ts" -o -name "route.js"
Check each route handler:
- Dynamic functions require dynamic = 'force-dynamic'
- No synchronous cookies()/headers() calls
- Proper TypeScript types for request/params
- Error handling updated for new patterns
generateStaticParams Changes
# Find static param generation
grep -r "generateStaticParams" --include="*.ts" --include="*.tsx"
Verify:
- Returns array of param objects (not nested)
- Works with new async params
- Proper TypeScript types
- No deprecated patterns
4. Migration Verification
Dependency Updates
Check package.json:
- next: ^16.0.0 or higher
- react: ^19.0.0 or higher
- react-dom: ^19.0.0 or higher
- @types/react: ^19.0.0 (if using TypeScript)
- @types/react-dom: ^19.0.0 (if using TypeScript)
Configuration Updates
Check next.config.js:
- experimental.dynamicIO enabled if using dynamic APIs
- staleTimes configured if controlling client-side cache
- Custom cacheLife profiles defined if needed
- TypeScript config updated for async params
Build Validation
Run and verify:
npm run build
- No deprecation warnings
- No type errors
- No runtime errors in build
- Static generation works correctly
- Dynamic routes render properly
Runtime Testing
- Authentication flows work correctly
- Protected routes require login
- Server Actions validate permissions
- Cache invalidation triggers updates
- Dynamic content updates appropriately
- Static content serves from cache
Violation Severity
Critical
- Missing authentication in Server Actions (CVE-2025-29927)
- Synchronous cookies()/headers() calls
- Security middleware removed or broken
High
- Missing cache directives on expensive operations
- Incorrect async params usage
- Broken revalidation strategy
Medium
- Using deprecated unstable_cache
- Middleware patterns that should be proxies
- Missing cache lifecycle configuration
Nitpick
- Suboptimal cache profiles
- Missing cache tags for fine-grained invalidation
- Legacy fetch caching patterns
Best Practices
- Run security audit first - Critical vulnerabilities take priority
- Group related violations - Fix all async API issues together
- Test incrementally - Verify each category before moving on
- Document decisions - Record why certain patterns were chosen
- Update documentation - Keep project docs current with Next.js 16 patterns
You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
rust-coding-skill
UtakataKyosui
Guides Claude in writing idiomatic, efficient, well-structured Rust code using proper data modeling, traits, impl organization, macros, and build-speed best practices.
Stay ahead of the MCP ecosystem
Get weekly updates on new skills and servers.