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

Question

我正在开发 Next.js 应用程序，我想向所有页面添加自定义 HTTP 响应标头（我不需要每个页面都可以配置）。

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

Answer 1

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

或者，您可以使用getServerSidePropsin在每个响应上添加自定义 HTTP 标头_app.js：

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会禁用静态优化，因为所有页面都将仅在服务器端呈现。

服务端渲染

Answer 2

对于 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',
          },
        ],
      },
    ]
  },
}

参见 next.config.js 头文件

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