如何在NextJS中将koa-session会话数据传递给页面组件

核心逻辑是将Koa的会话数据挂载到原生请求对象上，Next.js的服务端数据获取方法可以直接读取该对象上的自定义属性，最终传递给页面组件。

步骤1：修改Koa服务代码，挂载会话到请求对象 #

在调用handle()处理请求前，把ctx.session赋值给原生请求对象ctx.req的自定义属性即可：

router.get("(.*)", async (ctx) => {
  console.log("server.js session: ", ctx.session);
  // 创建或更新会话数据
  ctx.session.custom_data += 123;

  // 新增：把会话数据挂载到原生请求对象
  ctx.req.koaSession = ctx.session;

  await handle(ctx.req, ctx.res);
});

步骤2：在页面组件中获取会话数据 #

在页面的getServerSideProps方法中可以直接读取请求对象上挂载的会话数据，按需过滤后作为props传给页面组件：

// pages/xxx.js 示例代码
export default function Page({ customData }) {
  return <div>从会话获取到的custom_data值为：{customData}</div>
}

export async function getServerSideProps(context) {
  // 读取请求上挂载的会话数据
  const session = context.req.koaSession;
  // 仅返回前端需要的字段，避免泄露敏感数据
  return {
    props: {
      customData: session.custom_data
    }
  }
}

注意事项 #

• 该方案仅适用于服务端渲染的页面，使用getStaticProps的静态生成页面没有请求上下文，无法获取对应会话数据
• 如果使用Next.js 13+的App Router，可以在服务端组件中通过cookies()读取会话标识自行解析会话，也可以在Next.js自定义中间件中完成会话挂载逻辑
• 不要直接把完整的session对象返回给前端，必须过滤掉敏感属性后再传递

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