Next.js 如何配置 headers？

推荐答案

在 Next.js 中配置 headers 可以通过 next.config.js 文件中的 headers 配置项来实现。以下是一个示例配置：

-- -------------------- ---- -------
-- --------------
-------------- - -
  ----- --------- -
    ------ -
      -
        ------- ---------
        -------- -
          -
            ---- ------------------
            ------ ------- ------ -------
          --
          -
            ---- -------------------
            ------ -------- ------ -------
          --
        --
      --
    --
  --
--

在这个示例中，当用户访问 /about 路径时，Next.js 会自动添加 X-Custom-Header 和 X-Another-Header 到响应头中。

本题详细解读

1. headers 配置项

headers 是一个异步函数，返回一个包含多个对象的数组。每个对象定义了一组 headers，这些 headers 将在匹配的路径上生效。

2. source 属性

source 属性用于指定路径模式。它可以是字符串或正则表达式，用于匹配请求的路径。例如，/about 匹配 /about 路径。

3. headers 数组

headers 数组中的每个对象包含 key 和 value 属性，分别表示 header 的名称和值。例如：

{
  key: 'X-Custom-Header',
  value: 'Custom Header Value',
}

4. 支持正则表达式

source 属性支持正则表达式，以便更灵活地匹配路径。例如：

-- -------------------- ---- -------
-
  ------- --------------
  -------- -
    -
      ---- ----------------
      ------ --------
    --
  --
-

在这个示例中，:slug 是一个动态路径参数，可以在 value 中使用。

5. 全局 headers

如果你想为所有路径添加 headers，可以使用 /* 作为 source：

-- -------------------- ---- -------
-
  ------- -----
  -------- -
    -
      ---- ------------------
      ------ ------- ------ -------
    --
  --
-

6. 优先级

如果有多个 headers 配置匹配同一个路径，Next.js 会按照它们在数组中的顺序应用这些 headers。后定义的 headers 会覆盖先定义的 headers。

7. 安全性

在配置 headers 时，务必注意安全性。例如，避免暴露敏感信息或配置不安全的 headers。

通过以上配置，你可以在 Next.js 中灵活地管理 HTTP 响应头，以满足不同的需求。