Next.js security: what YouTube tutorials skip
App Router, server actions, and API routes bring new surfaces. Practical guidance for teams deploying on Vercel or AWS without a dedicated AppSec team.
Next.js is the default for startups and agencies in Puerto Rico building modern sites. Tutorials show auth in fifteen minutes; they rarely mention CSRF in server actions, exposing NEXT_PUBLIC_ variables, or rate limiting in route handlers. OWASP ASVS should be mandatory bookmarking for any lead dev.
Start with headers: strict Content-Security-Policy (with non
Start with headers: strict Content-Security-Policy (with nonce for legitimate inline scripts), X-Frame-Options or frame-ancestors, Referrer-Policy, and Permissions-Policy. Next.js configures these in next.config — not optional if you handle customer data. CSS-Tricks has published solid CSP examples for modern frameworks; adapt them, do not copy generic policies.
Server Components reduce client JS but do not remove server-side risk
Server Components reduce client JS but do not remove server-side risk. Validate all input with Zod or similar at the server boundary; never rely on client-only validation. For API routes that mutate state, use anti-CSRF tokens or consistently verify Origin/Referer. Auth with better-auth, NextAuth, or Clerk should be centralized — ad hoc patterns per route accumulate debt.
Secrets: rotate API keys, keep env vars server-only, audit that no service role key lands in the client bundle. On AWS deployments with OpenNext or containers, IAM roles per task — not access keys in .env baked into the image.
Dependency hygiene: npm audit and Dependabot are baseline; for real production add license review and lockfile pinning. A supply chain compromise in an icon package can take down your Black Friday landing.
Secure Next.js is not slower to build; it is only slower if you fix after the pentest. Involve security review on critical PRs from sprint one.
Operations and execution — connecting strategy with what the team ships every week.
