Essential Security Headers Every Next.js App Needs.

HTTP security headers are one of the easiest wins in web application security. They cost nothing to implement and protect against entire classes of attacks. Yet a surprising number of production Next.js applications ship without them.

Why Headers Matter

Browsers obey instructions sent in HTTP response headers. Security headers tell the browser how to behave when rendering your page — what scripts to trust, whether to allow embedding in iframes, and how to handle HTTPS. Getting them right closes the door on XSS, clickjacking, MIME sniffing, and data leakage attacks.

Configuring Headers in 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: 'Permissions-Policy',
    value: 'camera=(), microphone=(), geolocation=()',
  },
  {
    key: 'Content-Security-Policy',
    value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim(),
  },
];

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

Content Security Policy (CSP)

CSP is the most powerful and complex header. It tells the browser which sources are allowed to load scripts, styles, images, and fonts. A strict CSP prevents XSS attacks even if an attacker injects malicious script tags.

Start with a report-only mode to avoid breaking your site, then tighten the policy incrementally:

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'nonce-{NONCE}';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self';
  connect-src 'self' https://api.telegram.org;
  frame-ancestors 'none';
`;

HSTS — HTTP Strict Transport Security

HSTS instructs browsers to only connect to your site over HTTPS, even if a user types the HTTP URL. The preload directive submits your domain to browser preload lists — the strongest form of HTTPS enforcement.

Testing Your Headers

Use securityheaders.com to scan your site and get a letter grade. Aim for an A+. Mozilla Observatory is another excellent free tool that combines header analysis with TLS configuration checks.

Conclusion

Spending 30 minutes configuring security headers in next.config.js eliminates entire attack categories. There is no reason to ship without them. Start with the headers above, test with securityheaders.com, then refine your CSP policy over time.