Does this skill support the legacy Next.js Pages Router?

No, this skill is specifically designed to enforce modern best practices, prioritizing the App Router, Server Components, and the latest Next.js architecture.

Does it support the new Next.js caching directives?

Yes, it replaces legacy caching methods with the modern 'use cache' directive, allowing for granular control via cacheTag and cacheLife.

Is the React Compiler supported in this configuration?

Yes, the skill provides configuration patterns to enable the experimental React Compiler for automatic memoization and performance optimization.

How does this skill handle data mutations?

The skill prefers Server Actions ('use server') for data mutations, providing patterns for validation, revalidation with tags, and secure backend execution.

What is the proxy.ts file mentioned in the documentation?

Starting with Next.js 16+, proxy.ts replaces middleware.ts. It functions as a server-side network proxy to intercept and modify requests before routes are rendered.

Modern Next.js & App Router

Name: Modern Next.js & App Router
Author: azlekov

byazlekov

0•

API 개발

Builds production-ready web applications using the latest Next.js App Router patterns, Server Components, and advanced caching directives.

This skill equips Claude with the expertise to develop high-performance applications using the most modern Next.js features. It enforces a 'Server Component-first' philosophy, prioritizing the App Router over the legacy Pages Router. The skill provides specific implementation patterns for Next.js 16+, including the transition from middleware.ts to proxy.ts, the use of the React Compiler, and granular data caching with the 'use cache' directive. It is the definitive guide for developers looking to implement Server Actions, nested layouts, and SEO-optimized metadata according to the framework's latest architectural standards.

주요 기능

01Server Component-first approach to minimize client-side JavaScript

02Modern caching implementation via 'use cache' and cache tags

03Secure data mutations using Server Actions and form handling

04App Router architecture with nested layouts and route groups

050 GitHub stars

06Next.js 16+ proxy.ts configuration for server-side request interception

사용 사례

01Bootstrapping new full-stack applications with the latest Next.js 16+ standards

02Migrating legacy Pages Router or Middleware codebases to modern App Router patterns

03Implementing complex, multi-layered caching and revalidation strategies for data-heavy apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add azlekov/my-claude-code nextjs

For use in Claude.ai and ChatGPT

Download Skill