nextjs-reviewer_skill

Overview

This skill reviews Next.js App Router projects for framework-specific patterns, Server/Client Component separation, data-fetching practices, and common optimizations. It highlights risky uses of 'use client', async logic in client components, image/font issues, and Server Action pitfalls. The goal is actionable recommendations you can apply file-by-file.

How this skill works

The reviewer detects a Next.js project by checking next.config, package.json dependencies, and presence of app/ or pages/ directories. It scans code for App Router files (page, layout, loading, error), identifies Server vs Client component usage, analyzes fetch patterns and route handlers, and flags next/image and next/font misuses. It also validates Server Actions for placement, validation, and error handling, returning a concise results table with prioritized fixes.

When to use it

• Perform a focused Next.js pattern audit on App Router projects
• Validate Server/Client Component separation before a release
• Optimize images and fonts for LCP and layout stability
• Review Server Actions for input validation and proper placement
• Check data-fetching strategies and caching in server components

Best practices

• Prefer Server Components by default; add 'use client' only when interactivity requires it
• Move data fetching into Server Components to leverage automatic caching and streaming
• Use next/image with explicit width/height and priority for LCP images
• Place 'use server' at the top of files for Server Actions and validate inputs (e.g., zod)
• Provide try/catch around Server Actions and avoid async work inside Client Components

Example use cases

• CI lint step that flags unnecessary 'use client' directives and async client components
• Pre-merge review to convert useEffect fetches into server-side fetches for faster first paint
• Audit a project to replace raw <img> tags with next/image and add size attributes
• Review Server Actions to ensure they include validation and proper error handling
• Verify presence and correctness of loading.tsx and error.tsx in App Router layouts