在 Next.js App Router 中，客户端 Context 无法直接用于服务端 fetch 或数据库操作；推荐采用 Zustand 等服务端友好的状态库分离逻辑——服务端维护数据库上下文，客户端仅处理交互状态。
在 next.js app router 中，客户端 context 无法直接用于服务端 `fetch` 或数据库操作；推荐采用 zustand 等服务端友好的状态库分离逻辑——服务端维护数据库上下文，客户端仅处理交互状态。
Next.js App Router 的核心设计原则之一是明确区分服务端与客户端执行环境：useContext、useState 等 React Hook 仅在客户端组件（标注 "use client"）中可用，而服务端组件（默认无指令）无法访问任何客户端 Context。这意味着你当前定义的 ContextProvider 和 useAppContext 完全无法在服务端 fetch、Server Components 或 generateStaticParams 等场景中使用——即使尝试通过 props 逐层透传上下文信息，也会因服务端渲染生命周期限制而失效，且违背可维护性与性能优化原则。
✅ 正确解法：采用服务端原生兼容的状态管理方案
推荐使用 Zustand（v4.5+ 支持服务端初始化）或自定义服务端模块封装上下文数据。Zustand 的 store 实例可在 Node.js 环境中安全创建，无需 React 绑定，天然适配 Server Components：
// lib/db-context.ts —— 服务端专用上下文（纯 TS 模块）
import { create } from 'zustand';
interface DbContextState {
tenantId: string;
userId: string;
dbPool: any; // e.g., pg.Pool or PrismaClient
}
const useDbContext = create<dbcontextstate>((set, get) => ({
tenantId: process.env.DEFAULT_TENANT_ID || 'default',
userId: 'system', // 或从 auth middleware 注入
dbPool: null,
}));
// 可在 Server Component 中安全调用
export const getDbContext = () => ({
tenantId: useDbContext.getState().tenantId,
userId: useDbContext.getState().userId,
dbPool: useDbContext.getState().dbPool,
});
// 初始化入口（如在 middleware 或 layout 中预设）
export const initDbContext = (options: Partial<dbcontextstate>) => {
useDbContext.setState(options);
};</dbcontextstate></dbcontextstate>
// app/dashboard/page.tsx —— Server Component
import { getDbContext } from '@/lib/db-context';
import { getUserData } from '@/lib/db-queries'; // 使用 getDbContext 获取连接信息
export default async function DashboardPage() {
const { tenantId, userId, dbPool } = getDbContext();
const user = await getUserData({ tenantId, userId }, dbPool); // 安全传入服务端上下文
return <div>Welcome, {user.name}</div>;
}
⚠️ 注意事项：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- ❌ 不要尝试将客户端 Context 序列化后通过 props 或 cookies 传入服务端——存在安全风险（如伪造 tenantId）、类型丢失及性能开销；
- ✅ 对需动态获取的上下文（如基于请求头的 tenantId），应在 middleware.ts 或 layout.tsx 中解析并注入 Zustand store；
- ✅ 若使用 NextAuth，可结合 auth() 在服务端获取用户信息，并通过 initDbContext 注入；
- ✅ Zustand store 是单例，确保在服务端每次请求中独立初始化（Next.js 13.4+ RSC 默认按请求隔离，但需避免模块级全局污染）。
总结：放弃“复用客户端 Context 到服务端”的思路，转而构建轻量、服务端优先的上下文抽象层。这不仅解决数据库查询所需的上下文依赖问题，更符合 App Router 的渲染模型，提升安全性、可测试性与长期可维护性。
