Performance and SEO headers

This tutorial configures next.config.ts to remove the default X-Powered-By header, enable gzip compression, and set security-related HTTP headers for all routes. These headers improve security and can indirectly help with SEO (e.g. safer site signals) and performance (compression).

Why these headers matter

X-Content-Type-Options: nosniff — Prevents browsers from MIME-sniffing responses, reducing certain XSS risks. X-Frame-Options: SAMEORIGIN — Reduces clickjacking by allowing framing only from the same origin. Referrer-Policy — Controls how much referrer info is sent. Permissions-Policy — Restricts browser features (e.g. geolocation, camera) if you don’t need them. Compression — Smaller responses mean faster loads.

Create or update next.config.ts

Use the following config. The headers() function returns an array of objects with source (path pattern) and headers (array of key/value):

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  poweredByHeader: false,
  compress: true,
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "X-Content-Type-Options", value: "nosniff" },
          { key: "X-Frame-Options", value: "SAMEORIGIN" },
          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
          {
            key: "Permissions-Policy",
            value: "geolocation=(), microphone=(), camera=()",
          },
        ],
      },
    ];
  },
};

export default nextConfig;

Header summary

• poweredByHeader: false — Removes theX-Powered-By: Next.js header (optional, for obscuring stack).
• compress: true — Enables gzip compression for responses (default in production).
• X-Content-Type-Options: nosniff — Prevents MIME-type sniffing.
• X-Frame-Options: SAMEORIGIN — Frames only from same origin.
• Referrer-Policy: strict-origin-when-cross-origin — Full URL for same-origin, origin only for HTTPS→HTTPS, no referrer for HTTPS→HTTP.
• Permissions-Policy — Disables geolocation, microphone, camera for this origin (customize as needed).

Next steps

After config, add a PWA manifest and custom 404 page for polish. Back to all tutorials.