NextJS App路由服务端如何共享请求级数据/传递Props？

针对你在服务端组件间共享请求级数据的需求，以下是几种实用方案，完全适配Next.js App Router架构：

方案1：React Context（最推荐，服务端兼容） #

在App Router里，RootLayout作为服务端组件时，每个请求都会重新实例化组件，因此创建的Context天然是请求隔离的，不会出现跨请求数据污染。

步骤实现： #

1. 创建Context文件

// app/contexts/RequestDataContext.tsx
import { createContext, useContext } from 'react';

// 定义共享数据的类型，避免使用any
interface RequestData {
  item: string;
  // 可根据需求扩展更多字段
}

const RequestDataContext = createContext<RequestData | null>(null);

// 封装Provider组件，统一提供数据
export function RequestDataProvider({ children, data }: { children: React.ReactNode; data: RequestData }) {
  return (
    <RequestDataContext.Provider value={data}>
      {children}
    </RequestDataContext.Provider>
  );
}

// 封装自定义Hook，简化组件消费逻辑
export function useRequestData() {
  const context = useContext(RequestDataContext);
  if (!context) {
    throw new Error('useRequestData必须在RequestDataProvider内部使用');
  }
  return context;
}

2. 在RootLayout中提供数据

// app/layout.tsx
import { RequestDataProvider } from './contexts/RequestDataContext';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  // 这里可以在服务端获取请求级数据，比如从请求头、数据库查询、外部接口等
  const requestData = { item: "hello" };

  return (
    <html lang="zh-CN">
      <body>
        <RequestDataProvider data={requestData}>
          {children}
        </RequestDataProvider>
      </body>
    </html>
  );
}

3. 在子布局/页面中消费数据
   不管是服务端组件还是客户端组件，都可以通过自定义Hook获取共享数据：

// app/Layout.tsx
import { useRequestData } from './contexts/RequestDataContext';

export default function Layout({ children }: { children: React.ReactNode }) {
  const data = useRequestData();
  console.log("Data", data); // 服务端控制台会输出 { item: "hello" }
  return children;
}

方案2：手动传递Props（适合简单嵌套场景） #

如果你的布局层级很少，直接给子组件传Props也可以，但这种方式只适合直接子组件，嵌套深了会非常繁琐：

// app/layout.tsx
import React from 'react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const requestData = { item: "hello" };

  // 注意：仅当children是单个React元素时可用，多个元素需要遍历处理
  const childWithProps = React.cloneElement(children as React.ReactElement, { data: requestData });
  
  return (
    <html lang="zh-CN">
      <body>{childWithProps}</body>
    </html>
  );
}

子布局接收Props：

// app/Layout.tsx
interface IProps {
  children: React.ReactNode;
  data: { item: string };
}

export default function Layout({ children, data }: IProps) {
  console.log("Data", data);
  return children;
}

方案3：Node.js Async Local Storage（服务端底层共享） #

如果需要在非React的服务端代码（比如数据工具函数、中间件）中也共享请求级数据，可以用Node.js原生的Async Local Storage：

步骤实现： #

1. 初始化Async Local Storage

// app/lib/asyncStorage.ts
import { AsyncLocalStorage } from 'async_hooks';

// 定义存储的数据结构
export const asyncLocalStorage = new AsyncLocalStorage<{ requestData: { item: string } }>();

2. 在Middleware中注入数据

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { asyncLocalStorage } from './app/lib/asyncStorage';

export async function middleware(request: NextRequest) {
  // 把请求级数据存入Async Local Storage
  return asyncLocalStorage.run({ requestData: { item: "hello" } }, () => {
    return NextResponse.next();
  });
}

3. 在服务端组件中读取数据

// app/Layout.tsx
import { asyncLocalStorage } from './lib/asyncStorage';

export default function Layout({ children }: { children: React.ReactNode }) {
  const store = asyncLocalStorage.getStore();
  if (store) {
    console.log("Data", store.requestData);
  }
  return children;
}

注意：这种方式仅在服务端生效，客户端组件无法访问，且要注意内存泄漏问题，确保上下文正确销毁。

重要提醒 #

• 绝对不要直接修改React组件的props，props是只读属性，强行修改会导致不可预测的渲染问题。
• 在App Router的服务端组件中，每个请求都会独立创建组件实例，因此Context和组件内的状态天然是请求隔离的，不用担心跨请求数据串用的问题。

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