Next.js is a powerful framework, but its flexibility also creates a wide attack surface — from API routes and server components to client-side rendering and third-party dependencies. Here are 8 tools every Next.js developer should be using.
Anay Pandya
1,753 words
Anay Pandya
Founder of ZeriFlow · 10 years fullstack engineering · About the author
Key Takeaways
Next.js has become the dominant React framework for production applications — and that dominance makes it a target. Attackers increasingly know the file structure, routing conventions, and common misconfigurations of Next.js apps. A poorly configured API route, a missing Content-Security-Policy that allows arbitrary script injection, or a vulnerable version of a popular Next.js plugin can expose your entire application.
The good news: Next.js security has a rich tooling ecosystem. The challenging part is that no single tool covers everything. Next.js applications have an unusually wide attack surface — server-side rendering, API routes, client-side JavaScript bundles, environment variables, third-party dependencies, static assets, and a deployed infrastructure layer on top of all of that.
Is your site actually secure?
Run a free check — 60 seconds
Keep reading
This guide covers the 8 tools you need, what each one covers, and how to combine them into a practical security stack.
Before diving into tools, it''s worth mapping what you''re actually trying to protect:
| Layer | What Can Go Wrong |
|---|---|
| HTTP headers | Missing CSP, no HSTS, X-Frame-Options absent |
| SSL/TLS | Weak ciphers, expired cert, missing OCSP |
| API routes | Unvalidated input, missing auth checks, exposed internals |
| Server components | Data leaks through props passed to client |
| Client bundle | Hardcoded secrets, vulnerable dependencies |
| Environment variables | .env exposed, secrets in client-side bundle |
| Authentication | Insecure sessions, missing CSRF protection |
| Dependencies | CVEs in npm packages |
| Infrastructure | Open ports, exposed admin panels, misconfigured headers at CDN layer |
Each of these layers requires a different tool — and most require a combination of static analysis (catching issues in code) and runtime scanning (catching issues in the deployed application).
What it covers: Deployed application security — headers, SSL, cookies, content, open ports, information disclosure.
ZeriFlow scans your live Next.js application and checks 80+ security points in about 60 seconds. It''s the tool that tells you whether what you deployed is actually configured correctly in production.
The key thing ZeriFlow catches that static analysis tools miss: runtime misconfigurations. Your Next.js next.config.js might set security headers correctly in development, but a Vercel deployment configuration, a reverse proxy, or a CDN layer might strip or override them. ZeriFlow scans the actual HTTP responses your users receive, not what your code is supposed to send.
For Next.js specifically, ZeriFlow checks:
- Whether Strict-Transport-Security is served with the right max-age and includeSubDomains
- Whether your Content-Security-Policy is present and not set to unsafe-inline or unsafe-eval without justification
- Whether your API routes leak server version information in response headers
- Whether X-Powered-By: Next.js or similar is exposing framework information
- Whether cookies set by your auth layer have Secure, HttpOnly, and SameSite attributes
- Whether your SSL certificate chain is complete and configured correctly
How to configure Next.js headers (and then verify with ZeriFlow):
// next.config.js
const securityHeaders = [
{
key: ''X-DNS-Prefetch-Control'',
value: ''on''
},
{
key: ''Strict-Transport-Security'',
value: ''max-age=63072000; includeSubDomains; preload''
},
{
key: ''X-Frame-Options'',
value: ''SAMEORIGIN''
},
{
key: ''X-Content-Type-Options'',
value: ''nosniff''
},
{
key: ''Referrer-Policy'',
value: ''strict-origin-when-cross-origin''
},
{
key: ''Content-Security-Policy'',
value: "default-src ''self''; script-src ''self'' ''nonce-{NONCE}''; style-src ''self'' ''unsafe-inline'';"
},
{
key: ''Permissions-Policy'',
value: ''camera=(), microphone=(), geolocation=()''
}
]
module.exports = {
async headers() {
return [
{
source: ''/(.*)'',
headers: securityHeaders,
},
]
},
}After deploying, run ZeriFlow''s free scan to confirm these headers are actually being served as expected.
Pricing: Free (Quick Scan) / Pro €9.99/mo (monitoring, API, code analysis, CI/CD)
What it covers: npm package vulnerabilities, code-level security issues, IaC misconfigurations.
Next.js applications typically have hundreds of npm dependencies. Any one of them could have a CVE. Snyk continuously monitors your package.json and package-lock.json against its vulnerability database and alerts you when a dependency you''re using is vulnerable.
Snyk integrates with GitHub and GitLab so it automatically scans pull requests. It also has an IDE extension (VS Code, IntelliJ) that flags vulnerable imports as you write code.
Install and scan:
npm install -g snyk
snyk auth
snyk test # scan current project for vulnerabilities
snyk monitor # continuous monitoringFor Next.js specifically: Snyk is particularly useful for catching CVEs in next itself, in UI libraries like @radix-ui or shadcn/ui, and in server-side packages like prisma, drizzle-orm, or database drivers.
Pricing: Free (open source) / $25/user/mo (teams)
What it covers: Common JavaScript security anti-patterns detected at code-writing time.
The eslint-plugin-security and eslint-plugin-no-unsanitized plugins add security-focused rules to your existing ESLint configuration. They catch patterns like eval() usage, innerHTML without sanitization, child_process.exec() with user input, and regex patterns vulnerable to ReDoS attacks.
The advantage over other tools: zero friction. Developers see the warning in their IDE and fix it before it''s ever committed, rather than finding out in a security review.
Setup:
npm install --save-dev eslint-plugin-security eslint-plugin-no-unsanitized// .eslintrc.json
{
"extends": ["next/core-web-vitals"],
"plugins": ["security", "no-unsanitized"],
"rules": {
"security/detect-object-injection": "warn",
"security/detect-non-literal-regexp": "warn",
"security/detect-possible-timing-attacks": "warn",
"no-unsanitized/method": "error",
"no-unsanitized/property": "error"
}
}Pricing: Free (open source)
What it covers: Session management, OAuth flows, CSRF protection, credential handling.
Authentication is one of the highest-risk areas in any web application. Rolling your own auth in Next.js is a path to security vulnerabilities — incorrect session token generation, missing CSRF tokens, insecure password hashing, or broken OAuth flows.
Auth.js (formerly next-auth) handles all of this correctly by default. It manages sessions with secure, httpOnly cookies, built-in CSRF protection, and proper OAuth 2.0 flows for dozens of providers. Version 5 (stable in 2025) brought significant improvements to the App Router integration.
Key security defaults Auth.js provides:
- Session tokens stored in httpOnly, Secure, SameSite=lax cookies
- CSRF protection via double-submit cookie pattern
- JWT with proper signature validation
- Automatic token rotation
Pricing: Free (open source)
What it covers: Automated pull requests for outdated or vulnerable dependencies.
Dependabot monitors your repository and automatically opens pull requests when a dependency has a security advisory or a newer version is available. It''s built into GitHub and requires only a configuration file to enable.
# .github/dependabot.yml
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "weekly"
open-pull-requests-limit: 10
labels:
- "dependencies"
- "security"
reviewers:
- "your-github-username"The key benefit for Next.js projects: framework updates that contain security fixes (like Next.js patch releases) are automatically proposed without requiring anyone to manually track release notes.
Pricing: Free for GitHub repositories
What it covers: Active vulnerability scanning — XSS, injection, path traversal, auth bypass.
OWASP ZAP''s Docker image integrates into GitHub Actions to run active scans against your deployed preview or staging environment. It goes beyond passive checks to actually test for exploitable vulnerabilities.
GitHub Actions integration:
# .github/workflows/security.yml
name: Security Scan
on:
pull_request:
branches: [main]
jobs:
zap_scan:
name: ZAP Security Scan
runs-on: ubuntu-latest
steps:
- name: Run ZAP Baseline Scan
uses: zaproxy/action-baseline@v0.12.0
with:
target: ''https://your-preview-url.vercel.app''
rules_file_name: ''.zap/rules.tsv''
cmd_options: ''-a''The baseline scan is the most practical starting point — it runs passive checks and won''t submit forms or perform destructive active testing on your staging environment.
Pricing: Free (open source)
What it covers: Dependency vulnerability scanning with CVE database correlation, especially strong for multi-language projects.
If your Next.js application has backend services in Java, Python, or other languages (common in larger architectures), OWASP Dependency-Check complements Snyk by scanning those additional ecosystems against the National Vulnerability Database (NVD).
For pure Node.js Next.js projects, npm audit and Snyk cover the same ground. Dependency-Check becomes relevant when you have a polyglot codebase.
# Docker-based scan
docker run --rm \\
-v $(pwd):/src \\
owasp/dependency-check \\
--scan /src \\
--format HTML \\
--out /src/dependency-check-reportPricing: Free (open source)
What it covers: Programmatic security header setting for custom Next.js server setups.
If you''re running Next.js with a custom server (rather than the standard next start), Helmet.js sets security headers programmatically in your Express middleware:
// server.js (custom Next.js server)
const express = require(''express'')
const helmet = require(''helmet'')
const next = require(''next'')
const dev = process.env.NODE_ENV !== ''production''
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
const server = express()
server.use(helmet({
contentSecurityPolicy: {
directives: {
defaultSrc: ["''self''"],
scriptSrc: ["''self''", "''nonce-GENERATED_NONCE''"],
styleSrc: ["''self''", "''unsafe-inline''"],
imgSrc: ["''self''", "data:", "https:"],
connectSrc: ["''self''"],
fontSrc: ["''self''"],
objectSrc: ["''none''"],
mediaSrc: ["''self''"],
frameSrc: ["''none''"],
},
},
hsts: {
maxAge: 63072000,
includeSubDomains: true,
preload: true
}
}))
server.all(''*'', (req, res) => handle(req, res))
server.listen(3000)
})For standard Next.js deployments on Vercel or similar platforms, use next.config.js headers instead (see Tool 1 above).
Pricing: Free (open source)
| Category | Tool | When |
|---|---|---|
| Runtime headers and SSL | ZeriFlow | Pre-launch, post-deploy, continuous monitoring |
| npm dependencies | Snyk + Dependabot | On every commit, continuously |
| Code patterns | ESLint security plugin | While writing code |
| Authentication | Auth.js | At architecture stage |
| Active vulnerability testing | OWASP ZAP | In CI/CD on PRs |
| Multi-language dependencies | OWASP Dependency-Check | If polyglot stack |
| Custom server headers | Helmet.js | If using custom server |
No single tool covers everything. The realistic recommendation for most Next.js teams:
That stack covers the full Next.js attack surface without requiring a dedicated security engineer or a large budget.
Run a free security scan on your Next.js application now at zeriflow.com/free-scan — it takes 60 seconds and doesn''t require an account.
Scan your Vercel deployment's security headers.
80+ checks in 60 seconds — free.
Related resources
Website Vulnerability Scanner
Run a broader website security audit across headers, TLS, DNS, cookies, SEO, and disclosure checks.
Security Headers Checker
Check CSP, HSTS, X-Frame-Options, and other response headers.
SSL Checker
Review TLS certificate, HTTPS, and transport security signals.
DMARC Checker
Validate email authentication records for domain spoofing protection.
CSP Checker
Review Content-Security-Policy coverage and common gaps.
May 12, 2026
Supabase Security Checklist Before Launch — RLS, Auth & API Keys
Monitor your security score
Schedule recurring scans and catch regressions after deployments.