nextjs
Master Next.js 16 App Router development with 45 rules spanning build optimization, caching strategy, server components, routing, and mutations. This skill guides you through critical patterns like explicit `'use cache'` directives, `revalidateTag` with cache profiles, and parallel data fetching, plus a category-major review algorithm for auditing single files or entire codebases. Uncover codebase-level issues—duplicated fetchers, dead routes, and `'use client'` propagation—that single-file rules miss.
nextjs helps you write optimized Next.js 16 App Router code with proper caching, server components, and routing patterns.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-24
nextjs helps you write optimized Next.js 16 App Router code with proper caching, server components, and routing patterns. Master Next.js 16 App Router development with 45 rules spanning build optimization, caching strategy, server components, routing, and mutations. This skill guides you through critical patterns like explicit `'use cache'` directives, `revalidateTag` with cache profiles, and parallel data fetching, plus a category-major review algorithm for auditing single files or entire codebases. Uncover codebase-level issues—duplicated fetchers, dead routes, and `'use client'` propagation—that single-file rules miss.
Use it when
- nextjs teaches explicit `'use cache'` directives as the foundation of Next.js 16 caching.
- nextjs includes a category-major review algorithm that audits single files or entire codebases for performance and hygiene issues.
Verify before relying
Read SKILL.md below before installing (52 files). Open directory: indexed for reading, not audited.
Install
pproenca/dot-skills/nextjs · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the next.js 16 app router best practices?
nextjs guides you through 45 rules for App Router mastery, covering build optimization, caching strategy, server components, routing patterns, and mutations. Key practices include using explicit `'use cache'` directives for deterministic caching, leveraging `revalidateTag` with cache profiles for granular invalidation, and structuring parallel data fetches to avoid waterfall requests. The skill emphasizes server components as the default, strategic `'use client'` boundaries, and proper `generateMetadata` for SEO—all validated against real-world performance patterns.
How does nextjs caching strategy use cache directive work?
nextjs teaches explicit `'use cache'` directives as the foundation of Next.js 16 caching. This directive marks server functions and components for deterministic caching, replacing implicit behavior from earlier versions. Combined with `revalidateTag` and cache profiles, it gives you fine-grained control over what gets cached, when it expires, and how to invalidate it. The skill covers when to apply `'use cache'`, how to pair it with `cacheLife` settings, and patterns for handling dynamic data without cache collisions.
What does nextjs offer for app router codebase audit and refactor?
nextjs includes a category-major review algorithm that audits single files or entire codebases for performance and hygiene issues. Beyond file-level rules, it uncovers codebase-level problems: duplicated data fetchers across routes, dead code and unconsolidated routes, and `'use client'` propagation that bloats your client bundle. The audit identifies consolidation opportunities, suggests route merging, and flags unnecessary client boundaries—helping you transform scattered code into a lean, maintainable architecture.
How do I migrate from next.js 15 to 16 with updated patterns?
nextjs covers migration from Next.js 15 to 16, focusing on implicit-to-explicit caching changes. In version 16, caching is no longer implicit; you must use `'use cache'` directives and `revalidateTag` with cache profiles to achieve the behavior you had before. The skill guides you through updating data fetching patterns, adjusting middleware (replacing `proxy.ts`), and refactoring routes to leverage new App Router capabilities. It ensures your codebase aligns with version 16's performance model and best practices.
How can nextjs help optimize next.js bundle size and performance?
nextjs addresses bundle optimization through multiple strategies: dynamic imports for code splitting, `optimizePackageImports` configuration to reduce dependency bloat, and strategic `'use client'` boundaries to keep server logic out of the client bundle. The skill also covers barrel file optimization to avoid importing unused exports, streaming with Suspense for faster perceived performance, and turbopack persistent caching config for faster builds. Together, these reduce bundle size, improve load times, and enhance overall application performance.
What server components and data fetching patterns does nextjs teach?
nextjs emphasizes server components as the default, with patterns for parallel data fetching, proper error handling, and streaming with Suspense. It covers server actions for mutations and forms, distinguishing server vs. client data fetching to avoid unnecessary client-side logic. The skill teaches how to structure `generateMetadata` for SEO, use parallel routes and intercepting routes for advanced layouts, and leverage `'use cache'` with server functions to optimize data access. These patterns eliminate waterfalls, reduce client overhead, and improve Core Web Vitals.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Next.js 16 App Router Best Practices
Comprehensive Next.js 16 App Router guide for AI agents. Contains 45 rules across 9 categories, prioritized by impact from critical (build optimization, caching strategy) through to cross-cutting codebase hygiene (dedup, dead routes, boundary coherence). Reflects Next.js 16 changes: 'use cache' directive replacing implicit caching, revalidateTag(tag, cacheLife) requirement, proxy.ts replacing middleware.ts, Turbopack persistent caching, App Router conventions.
Rule files describe **pattern
(truncated - see the full file via the links below)
File tree — 15 files
skills/.curated/nextjs/AGENTS.md
skills/.curated/nextjs/README.md
skills/.curated/nextjs/SKILL.md
skills/.curated/nextjs/assets/templates/_template.md
skills/.curated/nextjs/metadata.json
skills/.curated/nextjs/references/_review-algorithm.md
skills/.curated/nextjs/references/_sections.md
skills/.curated/nextjs/references/action-error-handling.md
skills/.curated/nextjs/references/action-optimistic-updates.md
skills/.curated/nextjs/references/action-pending-states.md
skills/.curated/nextjs/references/action-revalidation.md
skills/.curated/nextjs/references/action-server-action-forms.md
skills/.curated/nextjs/references/build-barrel-files.md
skills/.curated/nextjs/references/build-dynamic-imports.md
skills/.curated/nextjs/references/build-external-packages.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Write optimized Next.js 16 App Router code with proper caching and server components”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill equips you with patterns and code examples for Next.js 16+ App Router development, covering Server and Client Components, Server Actions for form handling, Route Handlers for APIs, and the new async APIs. Use it when setting up projects with App Router, configuring caching with the "use cache" directive, building parallel or intercepting routes, or migrating from middleware.ts to proxy.ts.
This skill covers React Server Components patterns for Next.js 16+ applications, including App Router setup, component boundary design, and data fetching with the new cache components API. Learn Server Actions for mutations, streaming with Suspense, and React 19 patterns for building performant server-first apps. Includes migration guidance, best practices, and reference templates.
Learn Next.js 16's transformative features: explicit caching with "use cache" directives, Turbopack as the stable default bundler delivering 2-5× faster builds, and the migration from middleware.ts to proxy.ts. Discover how React Compiler automates memoization and DevTools MCP enables AI-assisted debugging within your framework's context.
Master Next.js 16's App Router with patterns for Server Components, Server Actions, and the new "use cache" directive. This skill covers critical breaking changes—async params, proxy.ts migration, and required default.js in parallel routes—plus caching APIs and React 19.2 features to optimize performance and prevent common errors.
Master full-stack Next.js 16+ development with App Router, Server Components, and TypeScript. This skill covers routing patterns, data fetching with the `use cache` directive, Server Actions, ISR/SSR/SSG strategies, Turbopack optimization, and MCP devtools integration for modern React 19+ architectures.
A reference skill covering Next.js 16 essentials: upgrade procedures, new caching APIs with the `"use cache"` directive, Turbopack as the stable default bundler, and key breaking changes around async Request APIs. Includes links to official docs, release notes, and practical migration guidance for TypeScript projects.
More skills nextjs-developer (MIT) · nextjs-ppr-patterns (MIT) · cache-components (MIT) · Nextjs (NOASSERTION)