NextJS 13 app目录下服务器组件获取NextRequest及请求URL方法

在Next.js 13的App目录架构下，服务器组件（页面/布局组件）完全可以获取请求URL，部分场景能直接拿到请求对象，以下是具体实现方式：

1. 直接获取Request对象（元数据/静态参数生成场景） #

在generateMetadata、generateStaticParams这类服务端专用函数中，可以直接接收request参数，通过它获取完整请求URL：

export async function generateMetadata({ request }: { request: Request }) {
  const currentUrl = new URL(request.url);
  // 基于URL做逻辑处理，比如生成对应标题
  return {
    title: `当前页面路径：${currentUrl.pathname}`
  };
}

2. 通用服务器组件中获取请求URL #

对于普通的服务器页面/布局组件，Next.js提供了headers()工具函数，通过请求头信息可以拼接出完整URL：

import { headers } from 'next/headers';

export default async function ServerLayout() {
  const headerEntries = headers();
  // 从请求头中提取协议、主机和页面路径
  const protocol = headerEntries.get('x-forwarded-proto') || 'http';
  const host = headerEntries.get('host');
  const pagePath = headerEntries.get('x-nextjs-page');
  const fullUrl = `${protocol}://${host}${pagePath}`;

  return (
    <div>
      <p>当前完整请求URL：{fullUrl}</p>
      <p>页面路径：{pagePath}</p>
    </div>
  );
}

注意：headers()仅能在异步服务器组件中调用，同步服务器组件无法使用该函数。

3. 动态路由场景下的URL拼接 #

如果是动态路由页面（如app/[postId]/page.tsx），可以结合路由参数params和headers()来拼接URL：

import { headers } from 'next/headers';

export default async function DynamicPostPage({ params }: { params: { postId: string } }) {
  const headerEntries = headers();
  const protocol = headerEntries.get('x-forwarded-proto') || 'http';
  const host = headerEntries.get('host');
  const fullUrl = `${protocol}://${host}/posts/${params.postId}`;

  return <div>动态文章页URL：{fullUrl}</div>;
}

内容的提问来源于stack exchange，提问作者Vmxes