Can it help with SEO and dynamic metadata?

Absolutely. It includes specific patterns for generateMetadata, OpenGraph images, and handling dynamic SEO requirements at the layout and page level.

Does this skill support the latest Next.js versions?

Yes, the patterns are optimized for Next.js 14 and 15, focusing on the modern App Router architecture and React Server Components.

Is it useful for migrating from the Pages Router?

Yes, it provides the architectural blueprints needed to translate legacy Pages Router conventions into modern App Router patterns effectively.

Does this skill cover data fetching and caching?

Yes, it provides implementation details for the Next.js Data Cache, Request Memoization, and various revalidation strategies (ISR).

Next.js App Router Patterns

Name: Next.js App Router Patterns
Author: kinneyyan

bykinneyyan

•

Developer Tools

Implements high-performance Next.js 14+ architectures using App Router patterns, Server Components, and advanced data-fetching strategies.

This skill equips Claude with specialized knowledge for architecting modern React applications using the Next.js App Router. It provides production-ready implementation patterns for Server Components, Client Components, and Server Actions, while guiding developers through complex routing features like parallel and intercepting routes. Whether you are migrating a legacy project from the Pages Router or building a fresh full-stack application, this skill ensures best practices for performance, SEO, and streaming UI are consistently applied.

Key Features

01Expert implementation of React Server Components and Client Component boundaries

02Full-stack data management using Server Actions with optimistic updates

03Performance optimization through Streaming with Suspense and ISR strategies

04Dynamic SEO and Metadata generation for modern web crawlers

052 GitHub stars

06Advanced routing patterns including Parallel Routes and Intercepting Routes (Modals)

Use Cases

01Migrating complex React applications from Pages Router to the App Router architecture

02Building high-performance e-commerce storefronts with streaming and edge caching

03Creating sophisticated dashboard layouts using Parallel Routes and slot-based rendering

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kinneyyan/prompts nextjs-app-router-patterns

For use in Claude.ai and ChatGPT

Download Skill