Next.js 服务端组件获取当前路径

问题背景

在 Next.js 13 及以上版本（应用路由器）中，服务端组件执行环境与传统客户端组件不同。开发者会遇到无法使用浏览器 API（如 window.location）获取当前 URL 路径的问题。当服务端逻辑需要基于当前路由进行条件处理时，这是一个常见痛点，例如：

• 基于不同路径显示不同的布局元素
• 实现服务端重定向逻辑
• 对动态路由参数进行预处理

推荐解决方案：中间件传递路径参数

经过实践验证，最可靠的方法是通过自定义中间件将路径信息注入请求头。这种方法有以下优势：

1. 兼容 Next.js 14 最新版本
2. 不依赖实现细节或非标准 API
3. 适用于所有应用目录结构

实现步骤

1. 创建中间件文件

在项目根目录（或 src 目录）下创建 middleware.ts：

import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  // 解析请求 URL
  const url = new URL(request.url);
  
  // 创建新的请求头
  const requestHeaders = new Headers(request.headers);
  
  // 注入路径信息
  requestHeaders.set('x-url', request.url);
  requestHeaders.set('x-origin', url.origin);
  requestHeaders.set('x-pathname', url.pathname);
  
  return NextResponse.next({
    request: {
      headers: requestHeaders,
    }
  });
}

2. 在服务端组件读取路径数据

import { headers } from 'next/headers';

export default function ServerComponent() {
  const requestHeaders = headers();
  
  // 获取路径信息
  const currentPathname = requestHeaders.get('x-pathname') || '';
  const currentOrigin = requestHeaders.get('x-origin') || '';
  const fullUrl = requestHeaders.get('x-url') || '';

  return (
    <div>
      当前路径: {currentPathname}
    </div>
  );
}

关于中间件位置

如果项目使用 src 目录结构，应将 middleware.ts 放在 src 目录下同级于 app 目录：

your-project/
├── src/
│   ├── app/
│   │   └── ... 
│   └── middleware.ts

动态渲染注意事项

性能影响

使用 headers() 的组件会被视为动态渲染（Dynamic Rendering），每次请求都会在服务器端实时渲染 ::：

如需静态优化，可考虑：

• 将路径访问限制在必要组件上
• 配合缓存策略减小性能影响
• 对非关键路径逻辑使用客户端组件

其他方法（不推荐）

1. 使用 next-url 头信息（已弃用）

const pathname = headers().get('next-url');

官方警告

Next.js 官方明确指出 避免使用 'next-url' 头信息，它属于实现细节而非公开 API，可能在版本更新中被移除

2. 通过其他标准头信息推导

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

缺陷说明

• referer 可能被浏览器禁用
• 无法处理无来源的请求
• 正则解析存在安全隐患

3. 使用其他非标准头信息

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

const pathname = `/${path.split('/').slice(2).join('/')}`;

::: caution 兼容性问题 这些头信息由服务器环境注入，本地开发与生产环境可能存在差异，且可能随部署平台变化 :::

最佳实践建议

1. 优先选择中间件方案 - 自定义头信息传递是最稳定可控的方法
2. 优化获取时机 - 仅在必要组件中获取路径信息
3. 避免在布局中使用 - 减少动态渲染范围
4. 考虑性能开销 - 对高流量页面进行基准测试

通过本文的中间件方法，您可以在服务端组件中安全可靠地获取当前路径信息，同时满足 Next.js 体系的最佳实践要求。