Next.js13 App目录中服务端布局/页面/组件如何访问request和response？

关于Server Components是否能访问类似getServerSideProps的context #

• Next.js 13的Server Components无法直接访问旧版getServerSideProps里包含req、res的完整context对象。
• 官方提供了专门的替代方案：通过next/cookies和next/headers两个API获取请求相关信息：
  • 调用cookies()可读取请求中的Cookie
  • 调用headers()可读取请求头
    这两个API是为Server Components的渲染场景量身设计的，替代了旧版context中请求信息的获取能力。

关于响应操作与Cookie设置的问题 #

• Server Components的设计定位是专注于内容渲染，不支持直接操作响应对象（比如设置响应头、写入响应内容）。
• 你遇到的cookies.set()报错是预期行为：当前Server Components环境下，next/cookies返回的对象仅支持读取操作，写入Cookie必须在Server Actions或Route Handlers中完成。
• 无需等待新功能，现有方案可满足需求：
  • 若要设置Cookie或修改响应头，推荐将逻辑放在app/api/目录下的Route Handlers中，或者使用标注了'use server'的Server Actions处理。
  • Server Actions设置Cookie示例：

    'use server';
    import { cookies } from 'next/headers';
    
    async function setAuthTokenCookie(token) {
      cookies().set('auth_token', token, {
        httpOnly: true,
        secure: process.env.NODE_ENV === 'production',
        maxAge: 60 * 60 * 24 * 7, // 7天有效期
      });
    }
    

  • 服务端鉴权场景下，可先在Server Components中通过cookies()读取Cookie完成鉴权校验；若需要更新Cookie（比如刷新token），直接调用上述Server Actions执行即可。

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