nextjs

Migrate Next.js 16 apps with async parameters, proxy.ts, and Cache Components.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/zerdos/spike-land-nextjs --skill nextjs-zerdos
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/zerdos/spike-land-nextjs/tree/main/.github/skills/nextjs
Command: npx skills add https://github.com/zerdos/spike-land-nextjs --skill nextjs-zerdos

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you migrate and stabilize Next.js 16 apps by mastering async route parameters, proxy-based middleware, and Cache Components.

Core Features & Use Cases

  • Async route parameters: Implement and reason about params, searchParams, cookies(), and headers() in app router route handlers.
  • Cache Components: Use the "use cache" directive to cache components, functions, and pages; leverage partial prerendering (PPR) and cache APIs like revalidateTag, updateTag, and refresh.
  • Proxy vs Middleware: Migrate from middleware.ts to proxy.ts for Node.js runtime proxies and explicit network boundaries; understand when and how to apply proxy.ts templates.
  • Parallel Routes: Handle Next.js 16 parallel routes by adding explicit default.tsx for each parallel slot to ensure graceful navigation.
  • Templates & Guidance: Utilize included templates (templates/*) and references to accelerate migrations and troubleshooting across App Router patterns.

Quick Start

  • Run the codemod to migrate Next.js 15 → Next.js 16: npx @next/codemod@canary upgrade latest
  • Rename middleware.ts → proxy.ts and update the function name to proxy
  • Create default.tsx (or default.ts) for every parallel route slot
  • Add "use cache" where caching is beneficial and adjust revalidateTag/updateTag/refresh usage
  • Test with npm run dev and a production build to verify behavior

Frequently Asked Questions about nextjs

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

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

Migrate from Next.js middleware by renaming middleware.ts to proxy.ts and updating the function name to proxy. This proxy migration enables Node.js runtime proxies with explicit network boundaries for predictable server rendering in Next.js 16.

What are async route parameters in Next.js 16 app router?

Async route parameters in Next.js 16 app router require awaiting params, searchParams, cookies(), and headers() in route handlers. This pattern ensures predictable server rendering by resolving dynamic data before rendering server components.

How do I use Cache Components with the "use cache" directive in Next.js?

Use Cache Components by adding the "use cache" directive to cache components, functions, and pages. Leverage partial prerendering (PPR) and cache APIs like revalidateTag, updateTag, and refresh to control caching lifecycles for predictable server rendering.

Why do parallel routes break navigation in Next.js 16 app router?

Parallel routes break navigation when missing a default.tsx file for a parallel slot. Create default.tsx or default.ts for every parallel route slot to ensure graceful navigation and prevent rendering errors across server/client boundaries.

What is the best way to upgrade Next.js 15 to Next.js 16?

The best way to upgrade Next.js 15 to 16 is running the codemod npx @next/codemod@canary upgrade latest. This codemod-driven migration handles async parameters, proxy migrations, and Cache Components automatically for predictable server rendering.

Can I use Next.js 16 proxy.ts with Node.js runtime features?

Yes, Next.js 16 proxy.ts supports Node.js runtime features for explicit network boundaries. Migrate from middleware.ts to proxy.ts to leverage Node.js runtime proxies and apply proxy.ts templates for predictable server rendering.