nextjs_skill

Overview

This skill provides concise, practical review rules and guidance for Next.js 14+ App Router projects focused on Server Components, API routes, and performance optimization. It codifies security checks, app-router structure conventions, data-fetching patterns, performance musts, accessibility, testing, and edge-runtime considerations. The goal is to help teams ship resilient, fast, and secure Next.js applications with repeatable code-review checkpoints. Guidance targets common anti-patterns and real-world trade-offs for modern Next.js apps.

How this skill works

The skill inspects app-router structure and component types to ensure Server vs. Client boundaries are correct, checks data-fetching and caching strategies, and validates API route practices including input validation and HTTP handling. It flags performance issues like improper image/font usage and missing Suspense boundaries, enforces security rules (no secrets on client, input sanitization), and evaluates accessibility and testing coverage. For advanced flows it reviews Edge runtime compatibility and dependency upgrade risks.

When to use it

• During pull-request reviews for Next.js 14+ projects using the App Router
• When migrating pages to Server Components or converting to the App Router
• Before releasing performance-sensitive features or public APIs
• When introducing Edge functions or changing runtime targets
• While auditing security, accessibility, or QA test coverage

Best practices

• Validate and sanitize all inputs in Server Actions and API routes; never trust client input
• Keep secrets and server-only APIs out of client components; enforce server-side checks for headers() and cookies()
• Prefer Server Components for data fetching; use cache() and revalidate only where appropriate
• Use next/image with explicit width/height or fill and next/font for fonts to ensure automatic optimization
• Wrap async UI with Suspense boundaries and avoid blocking fetches in layouts
• Implement error boundaries (error.tsx) and provide clear fallback UIs with safe error messages

Example use cases

• Code review checklist for PRs converting a route to Server Components
• Audit for a performance regression after a dependency upgrade
• Security review before exposing a new API route or webhook
• Checklist when adopting Edge runtime for low-latency endpoints
• Pre-release accessibility and e2e test verification for critical user journeys