nextjs服务端组件获取当前的页面路径

Next.js 是一套基于 React 的服务器端渲染框架，为了能够更好的实现服务端渲染，我们会尽量使用服务端组件来编写，那么如何在服务端组件获取到当前页面的路径呢？我们可以通过中间件（middleware）来实现。

Middleware

Next.js 的中间件（Middleware）是一种允许在请求完成之前运行代码的功能，它可以根据传入的请求来修改请求或响应。所以我们可以通过中间件来实现，获取当前请求的路径，放到请求头（request）对象里，然后用 nextjs/headers 提供的 headers 方法来获取。具体实现方式如下：

// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  const reqHeaders = new Headers(request.headers);
  reqHeaders.set('x-request-url', request.url);
  return NextResponse.next({
    request: {
      headers: reqHeaders,
    }
  });
}

服务端组件获取请求路径

import { headers } from 'next/headers';
export default function Nav() {
  const headersList = headers();
  const header_url = headersList.get('x-request-url') || "";
}

这样就可以获取到当前页面的路径，不过由于是服务端组件，后续不会根据新的路径进行跳转，这是因为 Next.js 在首次访问后，后续的访问页面是客户端渲染。