如何在js 13下获取服务器组件上的url路径名

看看 https://github.com/vercel/next.js/issues/43704，pauliusuza 解决了这个问题

您可以使用中间件进行解决

import { NextResponse } from 'next/server';

export function middleware(request: Request) {

  // Store current request url in a custom header, which you can read later
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-url', request.url);

  return NextResponse.next({
    request: {
      // Apply new request headers
      headers: requestHeaders,
    }
  });
}

然后从根布局内部使用它：

import { headers } from 'next/headers';

export default function RootLayout() {
  const headersList = headers();
  // read the custom x-url header
  const header_url = headersList.get('x-url') || "";
}

希望能有所帮助

或者，我认为一个更简单的解决方案是使用请求中已经存在的 Next 标头，例如 or .hostrefer

例：

import { headers } from 'next/headers';

export default function Navbar() {
    const headersList = headers();
    const domain = headersList.get('host') || "";
    const fullUrl = headersList.get('referer') || "";

    console.log(fullUrl);
}

这将找到路径名，假设你有一个 referer cookie：

import { headers } from 'next/headers';

const domain = headersList.get('host') || "";
const fullUrl = headersList.get('referer') || "";
const [,pathname] = fullUrl.match( new RegExp(`https?:\/\/${domain}(.*)`))||[];

console.log(pathname);

这对我有用

import { headers } from "next/headers";

const headersList = headers();
const domain = headersList.get("x-forwarded-host") || "";
const protocol = headersList.get("x-forwarded-proto") || "";
const pathname = headersList.get("x-invoke-path") || "";

在应用程序的 src 目录中创建一个middleware.ts，它将负责应用程序的 URL，我添加了一些其他有用的属性，例如适合调用内部 API 的 origin 和用于访问组件路径的路径名; 请注意，它只能在服务器组件内部使用

import { NextResponse } from 'next/server';

export function middleware(request: Request) {

const url = new URL(request.url);
const origin = url.origin;
const pathname = url.pathname;
const requestHeaders = new Headers(request.headers);
requestHeaders.set('x-url', request.url);
requestHeaders.set('x-origin', origin);
requestHeaders.set('x-pathname', pathname);

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

并在您的服务器组件中使用它，例如

import { headers } from "next/headers";

export default async function page() {

    const headersList = headers()
    const header_url = headersList.get('x-url') || "";
    const pathname = headersList.get('x-pathname');
    const origin_url = headersList.get('x-origin');

}

这个答案几乎是正确的。使用带有 src 模式的应用程序目录，我意识到我需要更改如下所示的位置。middleware.ts

.
├── src
│   ├── app
│   └── middleware.ts

NextJS v14 服务器端获取路径名

 import { headers } from "next/headers";

 const heads = headers()

 const pathname = heads.get('next-url')