How does it help with caching in Next.js 16?

It provides implementation patterns for the new 'use cache' directive and advanced revalidation APIs like revalidateTag, updateTag, and refresh.

Can I use this for React 19 features?

Yes, it includes support for React 19.2 features like the React Compiler (auto-memoization), View Transitions, and the useEffectEvent hook.

Does this skill support the Pages Router?

No, this skill is specifically optimized for the modern App Router architecture, which is the recommended standard for Next.js 16 applications.

Will it help fix 'params is a Promise' errors?

Yes, it includes specific patterns and quick fixes to resolve common Next.js 16 TypeScript errors related to asynchronous route properties.

What is the biggest change in Next.js 16 covered by this skill?

The transition to asynchronous route parameters (params and searchParams) and the replacement of middleware.ts with the new proxy.ts convention.

Next.js 16 App Router & React 19.2

Name: Next.js 16 App Router & React 19.2
Author: secondsky

bysecondsky

•

开发者工具

Builds high-performance, SEO-optimized web applications using the latest Next.js 16 App Router patterns and React 19.2 features.

This skill provides production-ready guidance for building modern Next.js 16 applications, focusing on the App Router architecture. It empowers Claude to implement complex patterns like React Server Components (RSC), Server Actions for form handling, and the new 'use cache' directive. It specifically addresses critical Next.js 16 breaking changes, such as the transition to asynchronous route parameters and the migration from middleware.ts to proxy.ts, ensuring your codebase remains current, performant, and error-free.

主要功能

01Manages Next.js 16 caching strategies using the 'use cache' directive and granular revalidation tags.

0221 GitHub stars

03Configures Server Actions with optimistic updates, form validation, and robust error handling.

04Implements Next.js 16 App Router patterns including layouts, loading states, and streaming SSR.

05Automates migration of async params and the proxy.ts middleware replacement logic.

06Optimizes SEO and web vitals through the Metadata API and advanced Image/Font optimization.

使用场景

01Building a data-intensive dashboard using Server Components and Partial Prerendering (PPR).

02Developing secure API Route Handlers and webhooks with streaming response capabilities.

03Migrating an existing Next.js 15 application to Next.js 16 and React 19.2.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add secondsky/claude-skills nextjs

For use in Claude.ai and ChatGPT

Download Skill