Does this skill support Next.js 15?

Yes, it is specifically designed to apply modern Next.js 15 patterns, including the latest Server Actions, Metadata API, and caching strategies.

Will it fix issues with the 'use client' directive?

Yes, it identifies unnecessary 'use client' usage and applies composition patterns to keep interactivity at the leaf components while maintaining Server Component benefits.

How does it improve application performance?

The skill moves data fetching to the server, implements Suspense boundaries for streaming, and optimizes caching to improve First Contentful Paint (FCP) and reduce bundle sizes.

Can it help migrate from Pages Router to App Router?

Absolutely. It identifies outdated patterns like getServerSideProps or getStaticProps and replaces them with modern Route Segment configurations and Server Components.

Next.js App Router Refactoring

Name: Next.js App Router Refactoring
Author: SnakeO

bySnakeO

0•

Developer Tools

Refactors legacy or inefficient Next.js code into modern, high-performance App Router architecture using React Server Components and best practices.

This skill transforms Next.js applications by migrating from the Pages Router to the App Router or optimizing existing App Router codebases. It specializes in implementing React Server Components (RSCs), streamlining data fetching with Server Actions, and improving performance through strategic Suspense boundaries and caching. By identifying anti-patterns like 'God Components' and unnecessary 'use client' directives, it helps developers build maintainable, SEO-friendly, and lightning-fast web applications based on Next.js 15 standards.

Key Features

01Implements high-performance data fetching using Server Actions and Suspense

02Fixes common anti-patterns like God Components and prop drilling

03Optimizes Server and Client Component boundaries to minimize JS bundle size

04Migrates Pages Router patterns to modern App Router architecture

05Configures advanced routing features including Parallel and Intercepting routes

060 GitHub stars

Use Cases

01Modernizing a Next.js 12 or 13 application to Next.js 15 standards

02Decomposing large, unmaintainable components into clean, modular structures

03Fixing performance bottlenecks caused by excessive client-side data fetching

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add snakeo/claude-debug-and-refactor-skills-plugin refactor-nextjs

For use in Claude.ai and ChatGPT

Download Skill