How to set custom headers for all pages via next.config.js

[amjedomar]

The following example which taken from nextjs.org/docs/api-reference/next.config.js/headers

will set the custom header x-hello: there for all pages except the index page (which have / path)

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'x-hello',
            value: 'there'
          },
        ],
      },
    ],
  },
}

my question: What is the pattern value that I have to pass to the source property which will set the custom header for all pages

[bram-rongen]

You can use source: "/(.*?)",

[bryanrsmith]

FWIW, I couldn't get this to work using next@11 and Vercel. Using "/(.*?)" exhibits the same behavior as "/(.*)" for me, causing the headers to not be set on the homepage. I worked around the issue by moving the headers array out to a constant and then using two separate rules-- one for "/", and one for "/(.*?)".

A note about how to set headers on all pages would make a nice addition to the docs.

[stevescavo]

You can also use source: '/:path*' which will match all routes including the homepage.

[ghost]

is this only working on vercel ? i am using heroku and did as described here but to no avail. Help is appreciated thanks

[FranCarstens]

Setting source: '/:path*' also sets the headers on paths like next/data which may not be what you intended.

[serg06]

Good call @FranCarstens . We skipped _next/data paths like so:

  async headers() {
    return [
      {source: '/', headers: ...},
      {source: '/([^_].*)', headers: ...},
    ];
  },