Security Headers for Next.js on Vercel

Security headers are instructions your server sends with every page that tell the browser how to behave — enforce HTTPS, refuse to be embedded in a frame, don't leak the full referrer. A default Next.js deploy on Vercel ships without most of them, and adding them changes nothing about how your app looks or works.

The headers that count

• Strict-Transport-Security (HSTS) — forces browsers to use HTTPS, even on the first redirect.
• X-Frame-Options / frame-ancestors — stops other sites embedding yours in an iframe (clickjacking).
• X-Content-Type-Options: nosniff — stops the browser guessing file types.
• Referrer-Policy — limits how much of your URL leaks to other sites.
• Content-Security-Policy (CSP) — the strongest control; start in report-only mode so it can't break your app.

Add them in next.config.js

Next.js applies headers from a single headers() function — no Vercel dashboard changes needed. Paste this and deploy:

// next.config.js
const securityHeaders = [
  { 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' },
];

module.exports = {
  async headers() {
    return [{ source: '/:path*', headers: securityHeaders }];
  },
};

Adding a CSP without breaking things

A Content-Security-Policy is the most powerful header and the easiest to get wrong. Start with Content-Security-Policy-Report-Only so violations are logged but nothing is blocked, watch what trips, then tighten and switch to the enforcing header.

Verify they're live

After deploying, open your site, then DevTools → Network → click the document request → Headers, and confirm each one appears in the response. Or paste your URL into LaunchPal — the security headers check reports exactly which are present and which are missing.