nextjs-16
This skill covers Next.js 16 App Router architecture, including file organization, Server Components as the default, Server Actions for mutations, and Route Handlers for API endpoints. Learn caching and revalidation patterns, proxy configuration, and Suspense-based streaming to build performant full-stack applications.
nextjs-16 teaches App Router file structure, Server Components, Server Actions, and caching patterns for Next.js 16.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
nextjs-16 teaches App Router file structure, Server Components, Server Actions, and caching patterns for Next.js 16. This skill covers Next.js 16 App Router architecture, including file organization, Server Components as the default, Server Actions for mutations, and Route Handlers for API endpoints. Learn caching and revalidation patterns, proxy configuration, and Suspense-based streaming to build performant full-stack applications.
Use it when
- nextjs-16 Server Actions are async functions marked with 'use server' that run on the server and can be called from Client Components.
- nextjs-16 caches data fetches by default.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
prowler-cloud/prowler/nextjs-16 · repository language: Python
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 patterns for organizing files?
nextjs-16 uses a file-system-based routing convention in the app/ directory. Folders define route segments, page.tsx files render UI, layout.tsx files wrap multiple routes, and route.ts files handle API endpoints. Special files like error.tsx, loading.tsx, and not-found.tsx manage error states and streaming. Route groups (parentheses) organize code without affecting the URL structure, and private folders (underscore prefix) keep shared components out of routing.
How do Server Actions and form handling work in nextjs-16?
nextjs-16 Server Actions are async functions marked with 'use server' that run on the server and can be called from Client Components or forms. They handle mutations, database writes, and side effects without exposing API routes. Use them in form actions or as callbacks to simplify data handling. They automatically serialize results and errors, making form submission and validation straightforward without manual fetch calls.
How should I set up caching and revalidatePath in next.js 16?
nextjs-16 caches data fetches by default. Use revalidatePath() in Server Actions to invalidate cached pages after mutations, or revalidateTag() with tagged fetch requests for fine-grained control. Set cache headers and revalidation intervals in route handlers. Combine these patterns to balance performance with fresh data—cache static content aggressively and revalidate only when data changes.
What is the nextjs 16 route handlers api for building endpoints?
nextjs-16 Route Handlers are defined in route.ts files within the app/ directory and export GET, POST, PUT, DELETE, and other HTTP methods. They receive a Request object and return a Response. Use them for API endpoints, webhooks, health checks, and proxy logic. They support streaming, middleware-like patterns, and direct database access, replacing the older pages/api/ convention.
How do Server vs Client Components and Suspense streaming differ?
nextjs-16 defaults to Server Components, which run only on the server and cannot use browser APIs or hooks. Client Components (marked 'use client') run in the browser and can use state and effects. Suspense boundaries enable streaming—Server Components can await async data and suspend, showing a fallback UI until data arrives. This pattern reduces JavaScript sent to the browser and improves perceived performance.
What are nextjs 16 best practices for app router development?
nextjs-16 best practices include: keep components as Server Components by default, use Server Actions for mutations, leverage revalidation for cache invalidation, organize code with route groups and private folders, implement error boundaries and loading states with special files, and use the server-only package to prevent accidental client-side imports of secrets. Combine these to build secure, performant full-stack applications.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
App Router File Conventions
app/
├── layout.tsx # Root layout (required)
├── page.tsx # Home page (/)
├── loading.tsx # Loading UI (Suspense)
├── error.tsx # Error boundary
├── not-found.tsx # 404 page
├── (auth)/ # Route group (no URL impact)
│ ├── login/page.tsx # /login
│ └── signup/page.tsx # /signup
├── api/
│ └── route.ts # API handler
└── _components/ # Private folder (not routed)
Next.js 16 Notes
- Use
proxy.tsfor request-boundary logic.middleware.tsis deprecated in Next.js 16. proxy.tsruns on the Node.js runtime and cannot be configured for Edge.- Keep
proxy.tsmatchers
(truncated - see the full file via the links below)
File tree — 1 file
skills/nextjs-16/SKILL.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 › “Learn Next.js 16 App Router file structure and conventions”
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.
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.
nextjs-developer is a specialist skill for architecting and implementing Next.js 14+ applications using the App Router and React Server Components. It guides you through routing structure, data fetching with caching, server actions for mutations, and deployment to Vercel, with built-in checks for performance and SEO compliance.
Prowler-ui equips you with the component patterns and design principles that power Prowler's cloud security platform. Learn the established conventions for building cohesive user interfaces and maintaining design consistency across the ecosystem. This skill bridges the gap between raw components and production-ready UI architecture.
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.
This skill guides implementation of Prowler's multi-tenant API architecture, covering row-level security enforcement, role-based access control, provider validation, and async task patterns. Learn the 4-database setup, RLS model constraints, M2M through-model requirements, and critical decorator ordering for tenant-isolated operations.