nextjs

Consolidate Next.js 16 App Router patterns with migration guidance.

1|Updated Jan 15, 2026

Search Tags:#nextjs #proxy #app-router #server-components #server-actions #parallel-routes

Ready to run

npx skills add https://github.com/Pallepadehat/agentkit --skill nextjs-pallepadehat

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/Pallepadehat/agentkit/tree/main/.agent/skills/nextjs
Command: npx skills add https://github.com/Pallepadehat/agentkit --skill nextjs-pallepadehat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill consolidates Next.js 16 App Router patterns, including Server Components, Server Actions, and Cache Components, with migration guidance to handle async params, proxy.ts, and parallel routes with default files.

Core Features & Use Cases

App Router patterns, Server Components and Server Actions, Cache Components using the "use cache" directive, and route handlers.
Proxy vs Middleware migration, and Parallel Routes with required default.js files.
Metadata API, image/font optimization, Turbopack, and TS configuration for Next.js 16 apps.
Use cases include migrating from Next.js 15 to 16, building production-ready apps, and troubleshooting common 16 breaking changes.

Quick Start

Use the Next.js 16 skill to scaffold patterns, templates, and references; start with the templates and adapt to your app.

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 15 to Next.js 16 with the App Router?▼

Next.js 16 migration requires updating to Node 20.9+ and React 19.2+, then adapting async params handling, proxy.ts configuration, and parallel routes with required default.js files. This Skill provides step-by-step templates and patterns to handle breaking changes and modernize your app router implementation.

What are Server Components and Server Actions in Next.js 16?▼

Server Components render on the server to reduce client JavaScript, while Server Actions enable secure server-side mutations from the client. Next.js 16 App Router consolidates both patterns with the Cache Components directive and optimized data fetching to improve performance and security.

How do I set up parallel routes with default.js in Next.js 16?▼

Parallel routes in Next.js 16 require default.js files to render fallback UI when segments don't match. This Skill covers the structural requirements, route handler patterns, and how to organize your app directory for independent concurrent segments.

Can I deploy a Next.js 16 app to Cloudflare or self-hosted environments?▼

Next.js 16 supports deployment across Vercel, Cloudflare, and self-hosted platforms. This Skill includes deployment-specific guidance for proxy configuration, route handler optimization, and performance tuning for each hosting environment.

What are the key breaking changes and compatibility requirements in Next.js 16?▼

Next.js 16 enforces Node 20.9+, React 19.2+, and introduces async params handling, new cache APIs like revalidateTag and updateTag, and refresh semantics. This Skill identifies common breaking changes and provides troubleshooting patterns to resolve compatibility issues.

How do I optimize images, fonts, and metadata in a Next.js 16 App Router?▼

Next.js 16 provides the Metadata API and built-in image and font optimization. This Skill covers metadata configuration, image optimization best practices, Turbopack integration, and TypeScript settings to improve performance and SEO across your app.