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
Install
prowler-cloud/prowler/nextjs-16 · repository language: Python
git clone https://github.com/prowler-cloud/prowler
cp -r prowler/skills/nextjs-16 ~/.claude/skills/nextjs-16npx skillfed install prowler-cloud/prowler/nextjs-16Frequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/nextjs-16/SKILL.md