Question

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

现在，我想知道如何做到这一点，无需即可设置自定义服务器。这有可能吗？如果可以，怎么办？

Answer 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 中对此进行了跟踪。

Answer 2

没有权衡就不可能实现。 Next.js具有自动静态优化功能，因此可以静态导出的页面将被导出到普通.html文件中。而且.html文件不需要在服务器上执行任何代码，因此没有地方添加自定义HTTP标头。

或者，您可以在getServerSideProps中带有_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

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

2 个答案: