How to set the http response headers in NextJS websites

Ullas Kishan

Cover Image for How to set the http response headers in NextJS websites

Ullas Kishan

July 18, 2023

3 min read

The importance of the http response headers is highly needed to protect the websites from hackers. If you poorly managed the response header, then one day the website will be compromised to the hacker.

Response headers are common to all the web applications that are created on any technology. I have already had blog post is related to the HTTP response headers.

What is HTTP security headers?

The HTTP security headers are specifically about the security of the web application while doing the communication between the client and server.

An HTTP header is a response by a web server to a browser that is trying to access a web page.

As I said, setting the response headers in websites will be different in different technology.

I just wanted to let you know how to set the response headers in NextJS. For that you have to follow some simple steps.

For your information, we are going to make changes to the next.config.js file. If you do not have the file, please create a file with next.config.js name in the root of the application.

next.config.js

next.config.js is a regular Node.js module, not a JSON file. It gets used by the Next.js server and build phases, and it's not included in the browser build.

In the below code snippet, I have stored all the necessary security headers as array in a variable.

const securityHeaders = [
  {
    key: "Permissions-Policy",
    value: "camera=(), microphone=(), geolocation=(), browsing-topics=()",
  },
  {
    key: "X-DNS-Prefetch-Control",
    value: "on",
  },
  {
    key: "X-Frame-Options",
    value: "SAMEORIGIN",
  },
  {
    key: "X-XSS-Protection",
    value: "1; mode=block",
  },
  {
    key: "Strict-Transport-Security",
    value: "max-age=63072000; includeSubDomains; preload",
  },
  {
    key: "referrer-policy",
    value: "origin-when-cross-origin",
  },
  {
    key: "x-content-type-options",
    value: "nosniff",
  },
];

Create an async function "headers" on next.config.js export array. The function name headers is reserved for http response headers feature.

The code is given below for your reference.

module.exports = {
  async headers() {
    return [
      {
        // Apply these headers to all routes in your application.
        source: "/posts/:slug",
        headers: securityHeaders,
      },
      {
        // Apply these headers to all routes in your application.
        source: "/(.*)",
        headers: securityHeaders,
      },
    ];
  },
};

The function return should be an array, containing object should in the following format

[
  {
    source:"url",
    headers:<headers>
  }
]

Once you exported the function, then the securityHeaders will be attached to the URL response.

Related tags

nextjs

security-headers

More Stories

Access to fetch domain-ABC from origin domain-XYZ blocked by cors policy

Cross-Origin Resource Sharing (CORS) is a security feature that lets a web page from one domain request resources from a different domain