在Next.js 13（Turbopack）中无需getServerSideProps如何获取Cookie？

在 Next.js 13 的 App Router 中，getServerSideProps 已被移除，你可以利用Server Component的特性直接在页面组件内处理服务器端逻辑，替代原有实现。以下是适配后的完整方案：

核心修改点 #

• 改用 Next.js 13 内置的 cookies() API（从 next/headers 导入）读取 Cookie，无需第三方 cookies 包
• 直接在 Server Component 中执行异步验证逻辑（App Router 的 page.tsx 默认是 Server Component）

适配后的代码（app/protected/page.tsx） #

import { cookies } from 'next/headers';

// 定义类型替代原有的 any，提升类型安全性
type AuthorizationStatus = {
  authorized: boolean;
};

// 抽离验证逻辑，便于复用和维护
async function getAuthorizationStatus(): Promise<AuthorizationStatus> {
  const cookieStore = cookies();
  // 读取目标 Cookie 的值
  const jwt = cookieStore.get('<MY TOKEN NAME>')?.value;

  if (!jwt) {
    return { authorized: false };
  }

  // 调用你的 JWT SDK 完成验证
  const { verified } = await <MY TOKEN SDK INSTANCE>.verifyJwt({ jwt });
  return { authorized: verified };
}

export default async function Protected() {
  const { authorized } = await getAuthorizationStatus();

  if (!authorized) {
    return <h2>Unauthorized</h2>;
  }

  return (
    <div className="max-w-md">
      <h1 className="font-bold">This is the Protected Section</h1>
    </div>
  );
}

关键说明 #

1. Server Component 异步能力：App Router 中的页面组件默认运行在服务器端，允许直接在组件内编写异步代码，无需额外的 props 传递机制。
2. 内置 Cookie 读取：cookies() 函数是 Next.js 13 专为服务器端场景提供的 API，安全可靠，仅在服务器环境可用，避免了客户端读取敏感 Cookie 的风险。
3. 逻辑拆分：将验证逻辑抽离为单独函数，让页面组件更简洁，也方便在其他需要验证的组件中复用。
4. 类型优化：通过定义 AuthorizationStatus 类型替代原有的 any，增强代码的可维护性和类型提示。

注意：确保你的 JWT 验证 SDK 支持在 Node.js 环境运行（因为 Server Component 执行在服务器端）。

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