能否在getServerSideProps中使用自定义Hook？如何复用其逻辑？

能不能在getServerSideProps中使用自定义Hook？ #

不能。React自定义Hook得严格遵守Hook规则：只能在React函数组件的顶层、或者其他自定义Hook的顶层调用。而getServerSideProps是Next.js提供的服务器端数据获取函数，运行在Node.js环境中，不属于React组件或自定义Hook范畴，直接在里面调用自定义Hook会打破规则，导致类似你遇到的customFunctionOfHook未定义这类报错。

如何在多个getServerSideProps间复用逻辑？ #

可以通过以下几种方式实现代码复用：

1. 提取为普通异步工具函数 #

把复用的逻辑封装成独立的异步函数，在各个getServerSideProps里直接调用即可。示例：

// utils/serverData.js
export async function fetchCommonData(context) {
  // 这里写复用的逻辑，比如请求API、处理上下文参数
  const res = await fetch(`https://api.example.com/data?userId=${context.params.userId}`);
  const data = await res.json();
  return { data };
}

然后在页面的getServerSideProps中使用：

// pages/user/[id].js
import { fetchCommonData } from '../../utils/serverData';

export async function getServerSideProps(context) {
  const { data } = await fetchCommonData(context);
  // 这里添加页面专属的逻辑
  return { props: { data } };
}

2. 使用高阶函数包装getServerSideProps #

如果需要给多个页面的getServerSideProps统一添加逻辑（比如鉴权、通用数据注入），可以创建一个高阶函数来包装原有的getServerSideProps：

// utils/withCommonProps.js
export function withCommonProps(originalGetServerSideProps) {
  return async function wrappedGetServerSideProps(context) {
    // 先执行通用逻辑
    const commonData = await fetchCommonData(context);
    
    // 执行页面专属的getServerSideProps（如果页面有定义的话）
    let pageProps = {};
    if (originalGetServerSideProps) {
      pageProps = await originalGetServerSideProps(context);
    }
    
    // 合并通用数据和页面专属数据
    return {
      props: {
        ...commonData.data,
        ...pageProps.props
      }
    };
  };
}

页面中使用：

// pages/user/[id].js
import { withCommonProps } from '../../utils/withCommonProps';

// 页面专属的getServerSideProps（可选）
async function getPageServerSideProps(context) {
  const userDetail = await fetch(`https://api.example.com/user/${context.params.id}`);
  return { props: { userDetail } };
}

// 用高阶函数包装页面的getServerSideProps
export const getServerSideProps = withCommonProps(getPageServerSideProps);

3. 封装为类或服务（复杂场景） #

如果复用逻辑涉及多个关联方法，可以封装成类或者服务类，在getServerSideProps中实例化调用：

// services/ServerDataService.js
export class ServerDataService {
  constructor(context) {
    this.context = context;
  }

  async fetchUser() {
    const res = await fetch(`https://api.example.com/user/${this.context.params.id}`);
    return res.json();
  }

  async fetchUserPosts() {
    const res = await fetch(`https://api.example.com/posts?userId=${this.context.params.id}`);
    return res.json();
  }
}

页面中使用：

// pages/user/[id].js
import { ServerDataService } from '../../services/ServerDataService';

export async function getServerSideProps(context) {
  const service = new ServerDataService(context);
  const user = await service.fetchUser();
  const posts = await service.fetchUserPosts();
  
  return { props: { user, posts } };
}

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