如何在TypeScript的NextPage页面中使用getServerSideProps？

核心逻辑很简单：getServerSideProps是作为独立函数导出的，和你用NextPage定义的页面组件完全分离，不需要把它嵌套进组件内部。以下是具体的实现步骤和代码示例，适配你提到的token gated场景：

1. 导入必要的TypeScript类型 #

首先从next包中导入页面组件和服务器端Props的类型：

import { NextPage, GetServerSideProps } from 'next';

2. 定义页面Props的类型 #

根据你从getServerSideProps中返回的数据结构，先定义对应的Props类型，确保类型安全：

// 替换成你实际需要的字段，比如原JS中的用户信息、权限状态等
type ProtectedPageProps = {
  user: {
    id: string;
    address: string;
  };
  // 其他需要传递给组件的属性
};

3. 编写页面组件（NextPage写法） #

用NextPage<ProtectedPageProps>来指定组件接收的Props类型：

const ProtectedPage: NextPage<ProtectedPageProps> = ({ user }) => {
  return (
    <div className="protected-page">
      <h1>受保护页面</h1>
      <p>当前用户地址：{user.address}</p>
      {/* 这里添加你的页面内容 */}
    </div>
  );
};

4. 实现getServerSideProps函数 #

单独编写getServerSideProps函数，并通过GetServerSideProps<ProtectedPageProps>指定其返回的Props类型，然后直接导出该函数：

export const getServerSideProps: GetServerSideProps<ProtectedPageProps> = async (context) => {
  // 迁移原JS中的token验证逻辑，比如从请求头/ cookie获取token、验证权限
  const { req, res } = context;
  
  // 示例：从cookie中获取验证用的token
  const authToken = req.cookies?.litAuthToken;
  
  // 验证token逻辑（替换成你实际的验证逻辑）
  let user = null;
  if (authToken) {
    // 调用验证接口或本地验证逻辑，获取用户信息
    user = {
      id: 'user_123',
      address: '0x...'
    };
  }
  
  // 如果验证失败，重定向到登录页
  if (!user) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }
  
  // 返回Props给页面组件
  return {
    props: { user },
  };
};

5. 导出页面组件 #

最后导出你的页面组件即可：

export default ProtectedPage;

关键注意点 #

• NextPage仅用于约束页面组件的类型，和服务器端Props函数完全独立，不需要关联在一起。
• 用GetServerSideProps<PropsType>可以让TypeScript自动校验getServerSideProps返回的props结构是否和组件期望的一致。
• 原JS版protected.js中的逻辑可以直接迁移到TS的getServerSideProps中，只需要补充类型定义即可，业务逻辑无需修改。

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