refactor-nextjs_skill

Overview

This skill refactors Next.js applications to improve maintainability, readability, and adherence to App Router best practices. It detects God Components, prop drilling, misuse of 'use client', outdated Pages Router patterns, missing Suspense boundaries, incorrect caching, and useEffect data-fetching anti-patterns. The refactor applies modern Next.js 15 patterns like Server Components, Server Actions, Suspense streaming, and layout/composition patterns to reduce bundle size and improve UX.

How this skill works

The skill scans component trees and flags anti-patterns: excessive 'use client' directives, useEffect-based data fetching, oversized components, and improper caching or metadata usage. It proposes and applies targeted refactors: split Server vs Client responsibilities, extract container/presentational components, create Server Actions for mutations, add Suspense/loading fallbacks, and set route segment config for correct rendering/cache behavior. It outputs a practical plan, code before/after snippets, file changes, and verification steps.

When to use it

• Migrating Pages Router code to App Router patterns
• Reducing bundle size by minimizing client components
• Fixing components that mix data fetching, state, and UI (God Components)
• Eliminating useEffect fetches in favor of server-side data fetching
• Implementing streaming loading states and proper caching strategies

Best practices

• Make Server Components the default; mark only interactive leaf components with 'use client'
• Split data fetching into Server Components and interactivity into minimal Client Components
• Use Server Actions for mutations and revalidate with tags/paths
• Add Suspense boundaries or loading.tsx for progressive rendering
• Use route segment config (dynamic/static/revalidate/runtime) to control rendering and caching

Example use cases

• Refactor a 1,500-line product page into ProductPage (Server) + ProductView (presentational) + AddToCartButton (Client)
• Replace useEffect fetches with server data fetching and add revalidate or tag-based caching
• Extract repeated form-handling logic into Server Actions and shared validation utilities
• Add Suspense boundaries and loading skeletons for dashboards with multiple slow widgets
• Convert a prop-drilling layout to fetch user data in Sidebar Server Component or expose a small client UserContext for interactive fragments