Skip to content

Security · Next.js (App Router)

How to add a Strict-Transport-Security header in Next.js (App Router)

Without HSTS, the first request a browser makes to your domain can still go over plain HTTP, where it can be intercepted and redirected before your redirect ever runs. A short max-age means browsers forget the rule quickly, so a returning visitor can be downgraded again.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

ts code
// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          {
            key: "Strict-Transport-Security",
            value: "max-age=63072000; includeSubDomains",
          },
        ],
      },
    ];
  },
};

export default nextConfig;

Note that Vercel sets HSTS automatically on custom domains, so check the response before adding it — a duplicate header is not harmful but it is confusing.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.