Next.js 14中AsyncLocalStorage问题：上下文无法在多组件间共享

这是Next.js架构设计导致的预期行为，并非你实现过程中遗漏了步骤。

Next.js的Middleware与API Handler、SSR页面属于独立的请求处理阶段，二者运行在不同的调用栈中：

• Middleware执行完成并返回NextResponse.next()后，其对应的AsyncLocalStorage上下文会被销毁，无法自动延续到后续的API或页面渲染流程里。
• AsyncLocalStorage的上下文仅在当前异步任务链中有效，跨阶段的请求处理不在同一个异步链内，因此无法共享上下文。

既然跨阶段无法直接用AsyncLocalStorage共享上下文，你可以改用以下方式传递数据：

1. 通过请求头传递上下文 #

在Middleware中将上下文序列化为字符串后存入请求头，再在API Handler或SSR页面中读取并反序列化：

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

export function middleware(req: NextRequest) {
  // 序列化上下文数据
  const context = JSON.stringify({ key1: 'test' });
  // 克隆请求头并添加自定义字段
  const newHeaders = new Headers(req.headers);
  newHeaders.set('x-request-context', context);
  
  return NextResponse.next({
    request: {
      headers: newHeaders,
    },
  });
}

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  // 从请求头读取并反序列化上下文
  const contextStr = req.headers['x-request-context'];
  const store = contextStr ? JSON.parse(contextStr as string) : null;
  console.log(store); // 现在能拿到 { key1: 'test' }
  res.status(200).send('ok');
}

2. 注意事项 #

• 请求头仅支持存储字符串，复杂数据必须进行序列化/反序列化处理。
• 敏感数据不要放在请求头中，避免暴露给客户端。若需传递敏感上下文，建议结合加密Cookie或服务端存储方式，配合getServerSideProps使用。
• 你的原代码存在一处小错误：store.key1 = test;需改为store.key1 = 'test';，否则会因test未定义报错。

内容的提问来源于stack exchange，提问作者Joaquín Bentancor