How does the 'use cache' directive work in this skill?

The skill provides patterns for using 'use cache' to provide granular, component-level caching, replacing older global caching configurations with more precise control.

Does this skill support the React Compiler?

Absolutely. It includes instructions for enabling the stable React Compiler in next.config.ts to allow for automatic code memoization.

What are the major architectural changes in Next.js 16?

Next.js 16 moves to Turbopack as the default bundler, replaces middleware.ts with proxy.ts for clearer network boundaries, and introduces an explicit Cache Components model.

Can this skill help migrate from Next.js 15?

Yes, it includes specific guidance on handling breaking changes such as the removal of sync access to params and headers, and the transition to proxy.ts.

Next.js 16 Expert

Name: Next.js 16 Expert
Author: fusengine

byfusengine

API開発

Architects and implements high-performance web applications using Next.js 16 features like Turbopack, Cache Components, and React 19.2.

概要

This skill equips Claude with specialized knowledge for Next.js 16 development, enabling it to guide developers through the transition to Turbopack as the default bundler and the implementation of the new Cache Components model. It provides precise guidance on migrating from middleware.ts to proxy.ts, leveraging the stable React Compiler for automatic memoization, and utilizing React 19.2 features like View Transitions to ensure production-grade, future-proof web architectures.

主な機能

0 GitHub stars
Optimizes build performance using Turbopack default configurations and filesystem caching.
Implements granular caching strategies with the new 'use cache' component directive.
Utilizes the stable React Compiler to eliminate manual useMemo and useCallback hooks.
Migrates and configures the Node.js-based proxy.ts for modern network boundaries.
Integrates React 19.2 capabilities including View Transitions and the Activity API.

ユースケース

Developing high-performance App Router projects with optimized server-side rendering and data fetching.
Configuring advanced routing and middleware logic using the new proxy.ts architecture.
Upgrading legacy Next.js applications to version 16 while resolving breaking changes in sync params and headers.

概要

主な機能

0 GitHub stars
Optimizes build performance using Turbopack default configurations and filesystem caching.
Implements granular caching strategies with the new 'use cache' component directive.
Utilizes the stable React Compiler to eliminate manual useMemo and useCallback hooks.
Migrates and configures the Node.js-based proxy.ts for modern network boundaries.
Integrates React 19.2 capabilities including View Transitions and the Activity API.

ユースケース

Developing high-performance App Router projects with optimized server-side rendering and data fetching.
Configuring advanced routing and middleware logic using the new proxy.ts architecture.
Upgrading legacy Next.js applications to version 16 while resolving breaking changes in sync params and headers.