Next.js App Router：同路由段深度嵌套服务端组件如何获取搜索参数？

能否获取搜索参数？ #

可以。同路由段内的深度嵌套非页面服务端组件完全能够获取到搜索参数，无需通过逐层透传Props的方式实现。

实现方案（以Next.js App Router场景为例） #

以下是两种无需透传Props的可行方案，均能保证ServerComponentLevelN维持服务端组件身份：

方案1：通过headers() API解析请求URL获取搜索参数

服务端组件可直接利用框架提供的headers() API获取当前请求的完整URL，再从中解析出搜索参数：

// ServerComponentLevelN.js
import { headers } from 'next/headers';
import { URLSearchParams } from 'url';

async function ServerComponentLevelN() {
  const headersList = headers();
  const requestUrl = headersList.get('next-url');
  const searchParams = new URL(requestUrl).searchParams;
  
  // 示例：用搜索参数请求数据
  const targetKeyword = searchParams.get('keyword');
  const dataRes = await fetch(`https://your-api-domain.com/data?keyword=${targetKeyword}`);
  const data = await dataRes.json();

  return <div>请求结果：{JSON.stringify(data)}</div>;
}

export default ServerComponentLevelN;

方案2：创建服务端上下文传递搜索参数

借助React的Context API，在路由页面组件中注入搜索参数，嵌套的服务端组件直接从Context读取，避免逐层透传：

// 1. 定义上下文文件 SearchParamsContext.js
import { createContext, useContext } from 'react';

const SearchParamsContext = createContext(null);

export function SearchParamsProvider({ children, searchParams }) {
  return (
    <SearchParamsContext.Provider value={searchParams}>
      {children}
    </SearchParamsContext.Provider>
  );
}

export function useSearchParamsContext() {
  const context = useContext(SearchParamsContext);
  if (!context) {
    throw new Error('useSearchParamsContext 必须在 SearchParamsProvider 内部使用');
  }
  return context;
}

// 2. 在路由页面组件中挂载Provider
// RouteSegmentPage.js
import { SearchParamsProvider } from './SearchParamsContext';

export default async function RouteSegmentPage({ searchParams }) {
  return (
    <SearchParamsProvider searchParams={searchParams}>
      <ServerComponentLevel1 />
    </SearchParamsProvider>
  );
}

// 3. 在ServerComponentLevelN中读取上下文
// ServerComponentLevelN.js
import { useSearchParamsContext } from './SearchParamsContext';

async function ServerComponentLevelN() {
  const searchParams = useSearchParamsContext();
  const targetKeyword = searchParams.get('keyword');
  
  const dataRes = await fetch(`https://your-api-domain.com/data?keyword=${targetKeyword}`);
  const data = await dataRes.json();

  return <div>请求结果：{JSON.stringify(data)}</div>;
}

export default ServerComponentLevelN;

注意事项 #

• 方案1依赖框架的服务端API，仅适用于服务端组件，客户端组件无法直接调用；
• 方案2的上下文在服务端渲染阶段会被正确注入，不会影响服务端组件的渲染逻辑；
• 两种方案都无需调整组件嵌套结构，能保持各组件的独立性。

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