Next.js的服务器组件是无状态的组件，它可以获得一些请求参数：标题和cookie。
但是，没有办法获得其他参数，例如request.url。

我不明白为什么要在服务器组件中获得属性。有人说您还没有准备好使用应用程序路由器。
我同意。服务器组件是React的未来，但它仍然是实验功能。

当我使用应用程序路由器时，我找到了一种在服务器组件中获取一些属性的方法，让我们开始。

服务器组件中包含哪些标头？

我在服务器组件中运行console.log()，如下：

export const debugHeaders = () => {
  const list = headers();
  console.table(Array.from(list.entries()));
};

我找到了以下标头键，让我们看看它包含的内容。

• host：服务器的真实主机名。如果您在反向代理后面使用该应用程序，请不要使用它。
• x-forwarded-proto：反向代理服务器的转发协议。如果要在反向代理后面检查HTTPS，请使用它。
• x-forwarded-host：反向代理后面的转发真实主机名。如果您使用的是反向代理后面的应用程序。
• x-middleware-invoke：似乎在继续使用Next.js的中间件时显示出一些信息。
• x-invoke-path：a
• x-invoke-query：带JSON的URL编码查询字符串。如果您想使用，请致电DecodeURLComponent和JSON.parse。
• x-invoke-output：不确定是什么。

根据您的服务器环境，标题键可能不同，因此请确保自己提取和验证它。

在服务器组件中获取request.url和查询字符串

基于上面的标题信息，我发挥了功能来吸用URL和查询字符串。

import { headers } from 'next/headers';

export const url = () => {
  const header = headers();
  return `${header.get('x-forwarded-proto') || (header.get('https') && 'https') || 'http'}://${header.get('x-forwarded-host') || header.get('host') || 'localhost:3000'}/${header.get('x-invoke-path')}`
}

export const query = () => {
  const header = headers();
  return JSON.parse(decodeURIComponent(header.get('x-invoke-query') || '{}')) as Record<string, string>
}

玩得开心和快乐的下一步。