headers (next.config)

Adds custom HTTP response headers to matching paths.

Since Next 9.5+ Spec ↗

Syntax

async headers() { return [{ source, headers: [{ key, value }] }] }

Parameters

NameTypeRequiredDescription
headers () => Promise<Header[]> No Rules with `source` and a list of `{ key, value }` headers.

Returns

Promise<Header[]> — Response header rules applied per path.

Examples

const nextConfig = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload',
          },
        ],
      },
    ]
  },
}
module.exports = nextConfig
const nextConfig = {
  async headers() {
    return [
      {
        source: '/static/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ]
  },
}
module.exports = nextConfig

Notes

Useful for global security headers (CSP, HSTS, X-Frame-Options) and caching policy. `source` supports path params/wildcards and `has`/`missing` conditions. For per-request dynamic headers use `middleware.js` or set them in Route Handlers/`NextResponse`.

See also