如何在不使用自定义服务器的情况下在 Next.js 中设置自定义 HTTP 响应标头？答案

【问题标题】：How to set custom HTTP response headers in Next.js without using a custom server?如何在不使用自定义服务器的情况下在 Next.js 中设置自定义 HTTP 响应标头？
【发布时间】：2020-05-15 05:50:50
【问题描述】：

我正在开发一个 Next.js 应用程序，我想向所有页面添加一个自定义 HTTP 响应标头（我不需要它是可配置的 per em> 页）。

现在我想知道如何做到这一点，不必设置自定义服务器。这甚至可能吗？如果有，怎么做？

【问题讨论】：

标签： javascript http-headers next.js

【解决方案1】：

对于 Next.js 版本 9.5 及之后的版本，您可以在 next.config.js 文件中定义自定义标头。

以下配置会将自定义标头应用于所有静态页面和服务器渲染页面。

module.exports = {
  async headers() {
    return [
      { 
        source: '/:path*{/}?',
        headers: [
          {
            key: 'x-custom-header',
            value: 'my custom header value for all pages',
          },
        ],
      },
    ]
  },
}

See next.config.js Headers

目前匹配所有页面有点不直观。如上例所示，它需要语法'/:path*{/}?'。目前在GitHub Issue #14930 中跟踪。

【讨论】：

这在 Vercel 上不起作用，因为它会覆盖生产中 next.config.js 中设置的 Cache-Control 标头，以确保可以有效地缓存静态资产

【解决方案2】：

如果没有权衡，这可能是不可能的。 Next.js 具有自动静态优化功能，因此可以静态导出的页面将导出为普通的.html 文件。并且.html 文件不需要在服务器上执行代码，因此没有地方添加自定义 HTTP 标头。

或者，您可以在 getServerSideProps in _app.js 中为每个响应添加自定义 HTTP 标头：

export async function getServerSideProps(context) {

  // set HTTP header
  context.res.setHeader('Content-Type', 'application/json')

  return {
    props: {}, // will be passed to the page component as props
  }
}

但是拥有getServerSideProps 会禁用静态优化，因为所有页面都只会在服务器端呈现。

Server-side Rendering

【讨论】：

如果您要部署到 Vercel，就是这样