在应用程序文件夹内的 NextJS 服务器组件中获取请求 URL

Question

有没有办法使用 NextJS 13 和新的应用程序目录来获取请求对象（NextRequest）或至少是request URL服务器组件内部（页面和/或布局组件）？

我知道如何在客户端组件中执行此操作，但我想在服务器组件中获取它。

Answer 1

据我所知，不可能直接访问服务器组件内的请求。

实际上，您可以next-url使用标头headers().get('next-url')，但它似乎相当不稳定（至少在我的环境中）。

作为解决方法，您可以使用middleware.ts在标头中注入自定义数据，例如：

export async function Middleware(req) {
  const requestHeaders = new Headers(req.headers)
  requestHeaders.set('x-url', req.nextUrl.url)

  return NextResponse.next({
    request: {
      headers: requestHeaders
    }
  })
}

然后在您的服务器组件上：

const MyServerComponent = () => {
  const url = headers().get('x-url')
  // Stuff with the URL
}