Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any way to use redux toolkit inside getStaticProps in Next.js?

I get the data when I use useEffect instead of getStaticProps. But in getStaticProps it's showing that hooks can only be use in functional component.

import Head from 'next/head'
import Image from 'next/image'
import Sidebar from '../components/Sidebar'
import styles from "../styles/Home.module.css"
import CssBaseline from '@mui/material/CssBaseline'
import Navbar from '../components/Navbar'
import Mainbody from '../components/Mainbodi'
import { useGetCryptosQuery } 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() => {
   const {data, isFetching} = await useGetCryptosQuery()
   return {
      props: {
         res: data.data.coins
      }
   }
}
like image 336
Muhammed Ladeed Avatar asked Oct 17 '25 10:10

Muhammed Ladeed


2 Answers

With the release of RTK query version 1.7, support for SSR is available. Although, according to the official docs, you need to setup next-redux-wrapper first.

like image 52
Nariman Rajabi Avatar answered Oct 20 '25 01:10

Nariman Rajabi


At the moment, using RTK Query with Next is only possible in non-SSR-Scenarios. That will change with RTK version 1.7.

See https://github.com/reduxjs/redux-toolkit/pull/1277

You can use the rest of RTK as you want with Next.

like image 32
phry Avatar answered Oct 20 '25 03:10

phry