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

開発者ツール

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.

主な機能

Implements high-performance data fetching using Server Actions and Suspense
Fixes common anti-patterns like God Components and prop drilling
Optimizes Server and Client Component boundaries to minimize JS bundle size
Migrates Pages Router patterns to modern App Router architecture
Configures advanced routing features including Parallel and Intercepting routes
0 GitHub stars

ユースケース

Modernizing a Next.js 12 or 13 application to Next.js 15 standards
Decomposing large, unmaintainable components into clean, modular structures
Fixing performance bottlenecks caused by excessive client-side data fetching

概要

主な機能

Implements high-performance data fetching using Server Actions and Suspense
Fixes common anti-patterns like God Components and prop drilling
Optimizes Server and Client Component boundaries to minimize JS bundle size
Migrates Pages Router patterns to modern App Router architecture
Configures advanced routing features including Parallel and Intercepting routes
0 GitHub stars

ユースケース

Modernizing a Next.js 12 or 13 application to Next.js 15 standards
Decomposing large, unmaintainable components into clean, modular structures
Fixing performance bottlenecks caused by excessive client-side data fetching