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

Question

所以基本上我在应用程序目录中有一个服务器组件，我想获取路径名。我尝试使用 window.location 来做到这一点，但它不起作用。 有什么办法可以做到这一点吗？

Answer 1

看看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') || "";
}

希望有帮助

Answer 2

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

host

或

refer

。

示例：

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);
}

Answer 3

这对我有用

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") || "";

Answer 4

假设您有引用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);

Answer 5

在应用程序的 src 目录中创建一个 middleware.ts，它将负责应用程序的 url

import { NextResponse } from 'next/server';

export function middleware(request: Request) {

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

    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') || "";
}

基于https://github.com/vercel/next.js/issues/43704