reviewing-nextjs-16-patterns

90
4
Source

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.zip

Installs 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 cache directive 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 params in page/layout/route components
  • await searchParams in 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

  1. Run security audit first - Critical vulnerabilities take priority
  2. Group related violations - Fix all async API issues together
  3. Test incrementally - Verify each category before moving on
  4. Document decisions - Record why certain patterns were chosen
  5. 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.

286790

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.

212415

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.

206290

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.

217234

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."

170198

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.

165173

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.