skills.rest
VKirill
VKirillCOMMUNITY
Explore all skills by this author →
GitHub

nextjs

Implement Next.js 16 App Router patterns for routing, caching, and middleware.

15|2|Updated May 23, 2026
Search Tags:#caching#middleware#nextjs#app-router#server-components#server-actions#ppr
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill nextjs-vkirill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/nextjs
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill nextjs-vkirill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill prevents Next.js 16 App Router mistakes by guiding correct patterns for Server Components, Server Actions, async dynamic APIs, caching with 'use cache', PPR, Turbopack, and proxy.ts middleware so your app behaves reliably and efficiently.

Core Features & Use Cases

  • Routing & Rendering Correctness: Choose the right app/ file conventions, handle async params/searchParams/cookies/headers, and place Suspense boundaries to get streaming and PPR working as intended.
  • Caching & Revalidation Done Right: Implement 'use cache' with cacheLife/cacheTag and use revalidateTag in Server Actions/route handlers to avoid stale data and invalidation bugs.
  • Production-Grade App Plumbing: Set up proxy.ts (Next 16 middleware), metadata/SEO via generateMetadata and OG images, and correct error boundaries for not-found/forbidden/unauthorized.

Quick Start

Use nextjs skill for a task like "fix my Next 16 page where params or cookies fail and the cache never invalidates after my Server Action".

Frequently Asked Questions about nextjs

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

FAQPage Schema
How do I fix Next.js 16 params or cookies breaking in Server Components?▼

Next.js 16 requires Promise-based params, searchParams, cookies, and headers to be awaited in Server Components. Correctly awaiting these async dynamic APIs prevents broken rendering and runtime errors.

Why does my Next.js App Router cache never invalidate after a Server Action?▼

Cache invalidation fails when Server Actions lack proper revalidateTag calls matching your cacheTag. Implement 'use cache' with cacheLife and use next/cache revalidation semantics to prevent stale data.

How do I configure streaming and PPR correctly in Next.js 16?▼

Place Suspense boundaries strategically around dynamic content to enable streaming and Partial Prerendering (PPR). Correct Suspense placement ensures static shells render immediately while streaming async server components.

What is the correct way to set up middleware in Next.js 16?▼

Next.js 16 replaces traditional middleware with proxy.ts. Configure proxy.ts with correct matchers to intercept routes safely and avoid runtime errors during edge rendering.

Can I use Zod with Next.js Server Actions and useActionState?▼

Yes, implement Server Actions using useActionState and Zod for schema validation. This pattern ensures type-safe form handling and data validation within the Next.js App Router architecture.

How do I migrate from Next.js 15 to 16 without breaking App Router rendering?▼

Migrating Next.js 15 to 16 requires updating to async dynamic APIs, adopting 'use cache' for caching, and switching to proxy.ts for middleware. Follow Next.js 16 requirements to prevent broken rendering and stale data.

Related Skills

Explore More Software Engineering Skills→
LuisDavidTFLuisDavidTF
2

nextjs-16

Organize Next.js 16 App Router projects with concise conventions.

Community
Intermediate
kshehadehkshehadeh

next-cache-components

Configures Next.js 16 Cache Components for Partial Prerendering with directives.

Community
Intermediate
ionmidoriionmidori

optimizing-nextjs-architecture

Implement Next.js App Router patterns with Server Components and Zod-validated Server Actions.

Community
Advanced
next-safe-actionnext-safe-action
3.1k

next-cache-components

Configure Next.js 16 Cache Components for Partial Prerendering.

Official
Advanced