What security headers should I add to my Next.js app?

At minimum, add Strict-Transport-Security (HSTS), X-Content-Type-Options, X-Frame-Options, and Referrer-Policy. For stronger protection, also add Content-Security-Policy and Permissions-Policy. These headers protect against clickjacking, MIME-sniffing, and cross-site scripting.

How do I add custom headers in Next.js?

Use the async headers() function in next.config.ts. It returns an array of objects with a source pattern for matching routes and an array of key-value header pairs. Headers are applied at the server level before the page renders.

What is Strict-Transport-Security (HSTS)?

HSTS tells browsers to only connect to your site over HTTPS. Set max-age to at least 1 year (31536000 seconds) in production. Add includeSubDomains if all subdomains support HTTPS, and preload to be included in browser preload lists.

Should I use Content-Security-Policy in Next.js?

Yes. CSP controls which resources (scripts, styles, images, fonts) can load on your pages. Start with a restrictive default-src and add exceptions as needed. Next.js may require unsafe-inline for styles and inline scripts unless you configure nonce-based CSP.

What does the Permissions-Policy header do?

Permissions-Policy restricts which browser APIs your site can use, like camera, microphone, geolocation, and payment. Setting camera=() blocks camera access entirely. This limits damage if your site is compromised.

How do I test my security headers after deploying?

Use securityheaders.com to scan your deployed site and get a grade from A+ to F. You can also check headers in browser DevTools under the Network tab by clicking any request and viewing the Response Headers.

SecureStartKit

Next.js Security Headers Generator

Configure security headers for your Next.js app and get copy-paste ready next.config.ts code. Choose a preset or customize each header individually.

Preset:

Strict-Transport-Security

Forces HTTPS for all future visits. Essential for production.

Max Age

includeSubDomainspreload

X-Frame-Options

Prevents clickjacking by controlling iframe embedding.

X-Content-Type-Options

Prevents MIME-type sniffing. Always enable this.

Referrer-Policy

Controls how much referrer info is sent with requests.

Content-Security-Policy

Controls which resources can load. Powerful but complex.

Edit directly or use Strict/Moderate presets as a starting point.

Generated next.config.ts

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload',
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin',
          },
          {
            key: 'Permissions-Policy',
            value: 'camera=(), microphone=(), geolocation=(), payment=(), usb=(), bluetooth=(), magnetometer=(), gyroscope=(), accelerometer=()',
          },
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'",
          },
        ],
      },
    ]
  },
}

export default nextConfig

Add the headers() function to your existing next.config.ts, or use this as a starting point. Test your deployed headers at securityheaders.com.