nextjs-16

Implements Next.js 16 applications with App Router, Turbopack, Cache Components, and proxy.ts.

1|Updated Jul 29, 2026
One-click install
npx skills add https://github.com/fusengine/kimi-code --skill nextjs-16-fusengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-16
Source: https://github.com/fusengine/kimi-code/tree/main/plugins/nextjs-expert/skills/nextjs-16
Command: npx skills add https://github.com/fusengine/kimi-code --skill nextjs-16-fusengine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building or migrating Next.js 16 applications requires navigating major breaking changes from v15—middleware.ts replaced by proxy.ts, Webpack removed in favor of Turbopack, Partial Prerendering replaced by the use cache directive, and async params/searchParams—while applying correct App Router and React 19 patterns. ## Core Features & Use Cases - v15 to v16 Migration Guidance: Documents every breaking change including proxy.ts replacing middleware.ts, Turbopack-only builds, and required React 19, with codemod commands for automated upgrades. - Core Framework Patterns: Covers App Router file conventions (page.tsx, layout.tsx, loading.tsx, error.tsx), Server Components, Cache Components (use cache, cacheTag(), cacheLife(), revalidateTag()), and route protection with proxy.ts on the Node.js runtime. - SOLID Module Architecture: Enforces a structure where thin app/ pages import from feature modules (modules/public, modules/auth, modules/cores) for maintainable codebases. - Use Case: Migrating a Next.js 15 dashboard to v16—rename middleware.ts to proxy.ts, switch caching to use cache with tags, await dynamic route params, and validate the result with the sniper agent. ## Quick Start Ask the agent to build a new Next.js 16 page with Server Components and cached data fetching, or to migrate an existing Next.js 15 route to the v16 conventions.

Frequently Asked Questions about nextjs-16

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate from Next.js 15 middleware.ts to proxy.ts?▼

Rename middleware.ts to proxy.ts at the project root and rename the exported function from middleware() to proxy(). Run `bunx @next/codemod middleware-to-proxy .` for automatic migration. Note that proxy.ts runs on the Node.js runtime, not Edge.

How does caching work in Next.js 16 with the use cache directive?▼

Add `use cache` inside async functions to cache their output, then use cacheTag() to tag entries and cacheLife() to set duration profiles like 'hours' or 'days'. Invalidate with revalidateTag() for background refresh or updateTag() for immediate consistency.

Does Next.js 16 still support Webpack configuration?▼

No. Next.js 16 removes Webpack entirely and uses Turbopack as the only bundler, delivering faster builds and HMR. Custom Webpack loaders and plugins from v15 must be replaced with Turbopack-compatible equivalents.

Why are params and searchParams async in Next.js 16?▼

In v16, dynamic route params and searchParams are Promises that must be awaited before use in pages, layouts, and generateMetadata. Type them as Promise<{ slug: string }> and destructure with await to avoid runtime errors.

When should I use nextjs-16 versus nextjs-stack or react-expert?▼

Use nextjs-16 for core framework mechanics like routing, caching, and migration. Use nextjs-stack when assembling a full production stack with Prisma, Better Auth, and shadcn/ui, and react-expert for pure React SPAs without next.config.