{"enrichment":{"faq":[{"a":"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.","q":"What are the next.js 16 app router patterns for organizing files?"},{"a":"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.","q":"How do Server Actions and form handling work in nextjs-16?"},{"a":"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\u2014cache static content aggressively and revalidate only when data changes.","q":"How should I set up caching and revalidatePath in next.js 16?"},{"a":"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.","q":"What is the nextjs 16 route handlers api for building endpoints?"},{"a":"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\u2014Server 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.","q":"How do Server vs Client Components and Suspense streaming differ?"},{"a":"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.","q":"What are nextjs 16 best practices for app router development?"}],"shadow_tags":["full-stack-framework","server-side-rendering","request-interception","cache-invalidation","api-development","form-submission","file-routing","component-patterns"],"summary_rewrite":"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."},"files":[{"bytes":4144,"path":"skills/nextjs-16/SKILL.md","sha256":"49f90d9430e6ce2528968169f157f65d66e7b5f11f24d3fca6373e2d25b0957b","url":"https://skillfed.io/files/prowler-cloud/prowler/nextjs-16/dbd2bee4/SKILL.md"}],"id":"prowler-cloud/prowler/nextjs-16","links":{"html":"https://skillfed.io/prowler-cloud/prowler/nextjs-16","md":"https://skillfed.io/prowler-cloud/prowler/nextjs-16.md","repo":"https://github.com/prowler-cloud/prowler"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":2285,"language":"Python","last_updated":"2026-07-27","license":"Apache-2.0","name":"nextjs-16","publisher":"prowler-cloud","stars":14491},"relations":{"similar":[{"id":"Gentleman-Programming/Gentleman-Skills/nextjs-15"},{"id":"giuseppe-trisciuoglio/developer-kit/nextjs-app-router"},{"id":"irahardianto/awesome-agv/nextjs-idioms"},{"id":"secondsky/claude-skills/nextjs"},{"id":"bilalmk/todo_correct/building-nextjs-apps"},{"id":"rohitg00/awesome-claude-code-toolkit/nextjs-mastery"},{"id":"jmsktm/claude-settings/nextjs-project-manager"},{"id":"organvm/a-i--skills/nextjs-fullstack-patterns"},{"id":"giuseppe-trisciuoglio/developer-kit/nextjs-code-review"},{"id":"JosiahSiegel/claude-plugin-marketplace/nextjs-data-fetching"}]},"slug":{"owner":"prowler-cloud","repo":"prowler","skill":"nextjs-16"},"version":"dbd2bee4"}