在Next.js的getStaticProps方法中能否使用Redux Toolkit？

云原生阿岚

2026-10-2

错误原因

所有以use开头的函数都是React钩子，只能在React函数组件/自定义钩子的顶层作用域调用，必须遵守React钩子的使用规则。
你用到的useGetCryptosQuery是RTK Query自动生成的查询钩子，而getStaticProps是Next.js提供的服务端执行的异步预渲染函数，不属于React组件的运行上下文，因此直接在里面调用钩子必然触发规则报错。

解决方案

如果要在getStaticProps中调用RTK Query的接口获取预渲染数据，需要使用RTK Query提供的服务端调用能力，不要用生成的钩子：

步骤1：导出你的RTK Query Api实例

你在../services/CryptoApi中通过createApi生成的实例需要额外导出，参考示例：

// ../services/CryptoApi 中的配置示例
export const cryptoApi = createApi({
  // 保留你原来的reducerPath、baseQuery等配置
  endpoints: (builder) => ({
    getCryptos: builder.query({
      // 保留你原来的查询配置
    })
  })
})
// 保留原来自动生成的钩子导出
export const { useGetCryptosQuery } = cryptoApi

步骤2：修改页面的导入和`getStaticProps`逻辑

// 原有导入保留，新增导出cryptoApi实例
import { useGetCryptosQuery, cryptoApi } from '../services/CryptoApi'

export default function Homee({res}) {
  console.log(res);
  return (
     <div>
        <div className={styles.container}>
           <CssBaseline />
           <Sidebar/>
           <div className={styles.bodi}>
              <Navbar/>
              <Mainbody/>
           </div>
        </div>
      </div>
  )
}

export const getStaticProps = async() => {
  // 调用对应endpoint的initiate方法发起请求
  const result = await cryptoApi.endpoints.getCryptos.initiate()
  // unwrap获取接口返回的原始数据
  const data = await result.unwrap()
  return {
    props: {
      res: data.data.coins
    },
    // 可选配置：增量静态再生间隔，单位为秒
    revalidate: 60
  }
}