# Security Patterns
> Next.js security best practices for production applications. Use when the user asks about "Next.js security", "CSRF protection", "CSP headers", "Content Security Policy", "XSS prevention", "environment variable safety", "server-only", "security headers", "CORS", "rate limiting", "input sanitization", or needs guidance on securing a Next.js app.
- Skill: `agents-store/security-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add agents-store/security-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agents-store/security-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: agents-store (https://skillmd.com/u/agents-store)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agents-store/security-patterns
---
# Security Patterns
## Environment Variable Safety
Only variables prefixed with `NEXT_PUBLIC_` are exposed to the browser. All others are server-only.
```bash
# .env.local
DATABASE_URL="postgresql://..." # Server only — NEVER sent to browser
API_SECRET="sk-..." # Server only
NEXT_PUBLIC_APP_URL="https://myapp.com" # Available in browser code
```
**Prevent accidental server code in client bundles** with the `server-only` package:
```bash
npm install server-only
```
```typescript
// lib/db.ts
import 'server-only' // Build error if imported in a Client Component
import { Pool } from 'pg'
export const db = new Pool({ connectionString: process.env.DATABASE_URL })
```
If a Client Component imports this file (directly or transitively), the build will fail with a clear error.
## Content Security Policy (CSP)
Use `proxy.ts` (Next.js 16) to add CSP headers with a nonce:
```typescript
// proxy.ts
import { NextRequest, NextResponse } from 'next/server'
export function proxy(request: NextRequest) {
const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
const isDev = process.env.NODE_ENV === 'development'
const cspHeader = `
default-src 'self';
script-src 'self' 'nonce-${nonce}' 'strict-dynamic'${isDev ? " 'unsafe-eval'" : ''};
style-src 'self' 'nonce-${nonce}';
img-src 'self' blob: data:;
font-src 'self';
object-src 'none';
base-uri 'self';
form-action 'self';
frame-ancestors 'none';
upgrade-insecure-requests;
`
const contentSecurityPolicyHeaderValue = cspHeader
.replace(/\s{2,}/g, ' ')
.trim()
const requestHeaders = new Headers(request.headers)
requestHeaders.set('x-nonce', nonce)
requestHeaders.set('Content-Security-Policy', contentSecurityPolicyHeaderValue)
const response = NextResponse.next({
request: { headers: requestHeaders },
})
response.headers.set('Content-Security-Policy', contentSecurityPolicyHeaderValue)
return response
}
```
Filter proxy to skip static assets:
```typescript
// proxy.ts (add at the bottom)
export const config = {
matcher: [
{
source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
missing: [
{ type: 'header', key: 'next-router-prefetch' },
{ type: 'header', key: 'purpose', value: 'prefetch' },
],
},
],
}
```
Read the nonce in a layout to pass it to Script components:
```tsx
// app/layout.tsx
import { headers } from 'next/headers'
import Script from 'next/script'
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const headersList = await headers()
const nonce = headersList.get('x-nonce') ?? ''
return (
{children}
)
}
```
> **Note:** In Next.js 16, the nonce is automatically applied to framework scripts. You only need to set it manually on third-party `