nextjs

Implement Next.js 16 App Router patterns with server components and proxy.ts.

Updated Oct 31, 2025
One-click install
npx skills add https://github.com/gavanduffy/better-chat-bot --skill nextjs-gavanduffy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs
Source: https://github.com/gavanduffy/better-chat-bot/tree/main/nextjs
Command: npx skills add https://github.com/gavanduffy/better-chat-bot --skill nextjs-gavanduffy

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides production-ready patterns for Next.js 16 App Router, including migration guidance, Server Components/Actions, Proxy.ts, and modern caching. It helps teams adopt Next.js 16 features, avoid breaking changes, and accelerate development with ready-to-copy templates.

Core Features & Use Cases

  • Async route parameters patterns (params, searchParams, cookies(), headers()) are now supported with guidance for async usage.
  • Proxy.ts migration: m explains how to replace middleware.ts with proxy.ts for explicit Node.js boundary.
  • Cache Components with "use cache" directive: opt-in caching for components, functions, and routes.
  • Server Components & Server Actions: data fetching, mutations, validation, and error handling patterns.
  • Route Handlers: API endpoints, webhooks, and streaming endpoints patterns.
  • Parallel Routes: guidance for required default.js in parallel routes.
  • React 19.2 integration: View Transitions and new React 19.2 features.
  • Metadata API & SEO: generateMetadata, sitemaps, Open Graph.
  • Image & Font optimization: next/image and next/font patterns.
  • Turbopack stability: Turbopack is the default bundler with performance benefits.
  • TypeScript configuration and best-practice setup.

Quick Start

Inspect the included templates under nextjs/templates (for example, app-router-async-params.tsx and proxy-migration.ts) and copy-paste the patterns into your Next.js project to prototype App Router patterns quickly.

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.ts to proxy.ts?

Proxy.ts replaces middleware.ts to define an explicit Node.js boundary in Next.js 16 App Router. The Skill provides migration templates showing how to move routing logic, authentication, and request interception from middleware to proxy.ts for clearer deployment semantics across Vercel, Cloudflare Workers, and self-hosted environments.

What are server components and server actions in Next.js 16 App Router?

Server Components render on the server and reduce client bundle size; Server Actions let you call backend functions directly from forms and events without API boilerplate. This Skill covers data fetching, mutations, validation, and error handling patterns for both, plus async route parameters like params and searchParams.

How do I implement caching with the 'use cache' directive in Next.js 16?

The 'use cache' directive in Next.js 16 enables opt-in caching for components, functions, and entire routes. This Skill provides patterns for applying cache directives to server components and async functions, including cache revalidation strategies and integration with updated caching APIs.

Do I need to use Turbopack for Next.js 16, and what's the performance impact?

Turbopack is the default bundler in Next.js 16 and delivers faster builds and local development. This Skill covers Turbopack configuration and defaults, showing how to leverage its performance benefits without manual setup in most projects.

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

Parallel routes in Next.js 16 require a default.js file in each slot to handle unmatched routes. This Skill explains the parallel routes architecture, when default.js is required, and provides templates for common patterns across multiple route segments.

Can I use Next.js 16 App Router patterns across different hosting platforms?

Yes. This Skill includes production-ready patterns that work across Vercel, Cloudflare Workers, AWS, and self-hosted deployments. It covers platform-specific considerations for server components, server actions, route handlers, and proxy.ts configuration.