nextjs-security
Secure Next.js App Router with middleware auth, Server Action validation, CSP headers, and taint APIs. Use when adding authentication middleware, validating Server Action inputs with Zod, or preventing secret leakage to client bundles. (triggers: app/**/actions.ts, middleware.ts, action, boundary, sanitize, auth, jose)
Best use case
nextjs-security is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Secure Next.js App Router with middleware auth, Server Action validation, CSP headers, and taint APIs. Use when adding authentication middleware, validating Server Action inputs with Zod, or preventing secret leakage to client bundles. (triggers: app/**/actions.ts, middleware.ts, action, boundary, sanitize, auth, jose)
Teams using nextjs-security should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs-security/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs-security Compares
| Feature / Agent | nextjs-security | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Secure Next.js App Router with middleware auth, Server Action validation, CSP headers, and taint APIs. Use when adding authentication middleware, validating Server Action inputs with Zod, or preventing secret leakage to client bundles. (triggers: app/**/actions.ts, middleware.ts, action, boundary, sanitize, auth, jose)
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Next.js Security ## **Priority: P0 (CRITICAL)** ## Workflow: Secure a Next.js App 1. **Add auth middleware** — Create `middleware.ts` to verify JWT/session on protected routes. 2. **Validate Server Actions** — Parse all inputs with Zod schemas; call `await auth()` first. 3. **Set security headers** — Add CSP, HSTS, X-Frame-Options in middleware response. 4. **Use `server-only`** — Import in modules containing secrets to prevent client bundling. 5. **Taint sensitive objects** — Use `taintObjectReference` to block server objects from reaching client. ## Secure Server Action Example See [implementation examples](references/implementation.md) ## Implementation Guidelines - **Next.js Middleware**: Use **`middleware.ts`** for edge-side authentication, role-based access control (RBAC), and enforcing **Security Headers** (e.g., **`Content-Security-Policy (CSP)`**, **`X-XSS-Protection`**). - **Server Actions**: Always **sanitize all inputs** from `FormData` or JSON using **Zod**. Perform **authentication checks** (`await auth()`) inside every action to verify the caller. - **Data Tainting**: Use the **`experimental_taint`** API (**`taintObjectReference`**) to ensure sensitive server objects (e.g., User with `passwordHash`) never leak into a Client Component. - **Route Handlers (`route.ts`)**: Implement **rate limiting** to prevent brute-force or DoS attacks. Verify **Origin/Referer headers** to mitigate **CSRF** (Cross-Site Request Forgery). - **Auth Tokens**: strictly use **`HttpOnly`, `Secure` cookies** with **`SameSite: 'Lax'`** for session management. Never store tokens in `localStorage`. - **Logic Isolation**: use the **`server-only`** package to prevent backend-specific logic from being included in the client bundle. - **Component Purity**: **Escape all user-provided content** rendered in components. Never use **`dangerouslySetInnerHTML`** without a sanitizer like **`DOMPurify`**. ## Anti-Patterns - **No leaking DB fields to client**: Use DTOs; never pass raw model objects. - **No `process.env` in client bundles**: Mark as `NEXT_PUBLIC_` only if safe to expose. - **No unvalidated Server Action inputs**: Always validate with Zod schema. - **No auth checks in shared Layouts**: Auth in layouts is insecure; use Middleware. ## References - [Secure App Router Patterns](references/implementation.md)
Related Skills
spring-boot-security
Configure Spring Security 6+ with Lambda DSL, JWT, and hardening rules. Use when configuring Spring Security 6+, OAuth2, JWT, or security hardening in Spring Boot. (triggers: **/*SecurityConfig.java, **/*Filter.java, security-filter-chain, lambda-dsl, csrf, cors)
react-security
Prevent XSS, secure auth flows, and harden React client-side applications. Use when preventing XSS, securing auth flows, or auditing third-party dependencies in React. (triggers: **/*.tsx, **/*.jsx, dangerouslySetInnerHTML, token, auth, xss)
react-native-security
Secure storage, network traffic, and deep links in React Native mobile apps. Use when implementing secure storage, certificate pinning, or deep link validation in React Native. (triggers: **/*.tsx, **/*.ts, security, keychain, secure-storage, deep-link, certificate-pinning)
php-security
PHP security standards for database access, password handling, and input validation. Use when securing PHP apps against SQL injection, XSS, or weak password storage. (triggers: **/*.php, pdo, password_hash, htmlentities, filter_var)
nextjs-upgrade
Next.js version migrations using official guides and codemods. Use when migrating a Next.js project to a new major version using codemods. (triggers: package.json, next upgrade, migration guide, codemod)
nextjs-tooling
Configure Next.js build tooling, deployment, and developer workflow. Use when setting up Turbopack, standalone Docker output, bundle analysis, CI caching, environment variable validation, or ESLint integration for Next.js projects. (triggers: next.config.js, package.json, Dockerfile, turbopack, output, standalone, lint, telemetry)
nextjs-testing
Write Jest or Vitest unit tests with React Testing Library and Playwright E2E tests for Next.js projects. Use when testing components with RTL, mocking APIs with MSW, or creating Playwright user flow tests. (triggers: **/*.test.{ts,tsx}, cypress/**, tests/**, jest.config.*, vitest, playwright, msw, testing-library)
nextjs-styling
Implement zero-runtime CSS with Tailwind, CSS Modules, and the cn() utility for RSC-compatible styling in Next.js. Use when choosing a styling library, creating dynamic class utilities, or optimizing fonts with next/font. (triggers: **/*.css, tailwind.config.ts, **/components/ui/*.tsx, tailwind, css modules, styled-components, clsx, cn)
nextjs-state-management
Apply best practices for managing URL, server, and client state in Next.js applications. Use when choosing between URL params, SWR/TanStack Query, Zustand, or Context for state, or when fixing hydration mismatches from localStorage. (triggers: **/hooks/*.ts, **/store.ts, **/components/*.tsx, useState, useContext, zustand, redux)
nextjs-server-components
Build async React Server Components and place 'use client' boundaries at leaf nodes for interactivity in Next.js App Router. Use when deciding RSC vs Client Component, composing server data into client wrappers, or fixing hydration errors. (triggers: app/**/*.tsx, src/app/**/*.tsx, app/**/*.jsx, src/app/**/*.jsx, use client, Server Component, Client Component, hydration)
nextjs-server-actions
Implement mutations, forms, and RPC-style calls with Next.js Server Actions. Use when implementing Server Actions, form mutations, or RPC-style data mutations in Next.js. (triggers: app/**/actions.ts, src/app/**/actions.ts, app/**/*.tsx, src/app/**/*.tsx, use server, Server Action, revalidatePath, useFormStatus)
nextjs-rendering
Select and implement SSG, SSR, ISR, Streaming, or Partial Prerendering strategies in Next.js App Router. Use when choosing a rendering mode for a page, configuring generateStaticParams, or enabling PPR. (triggers: **/page.tsx, **/layout.tsx, generateStaticParams, dynamic, dynamicParams, PPR, streaming)