How can I use context API and getServerSideProps in Next.js?

I am trying to call the currency according to the properties given in the context API, but whenever I call it will get Error: TypeError: Cannot read properties of null (reading 'useContext'). But when I call it in my home page without passing it to getServerSideProps it's working fine. Can someone please help me out to fix this issue?

import { CryptoState } from "../context/cryptoContext"
import { useContext } from "react";

const GetCurrency = async () => {
    const { currency } = await useContext(CryptoState)
    return currency
}

export default GetCurrency

import Head from 'next/head'
import GetCurrency from '../components/getCurrency';

export default function Home(jsonData) {
  console.log(jsonData)

  return (
    <div className="bg-green-100 dark:bg-gray-800 pb-5 h-screen w-screen">
      <Head>
        <title>Crypto</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

    </div>
  )
}

export async function getServerSideProps(context) {
  const currency = await GetCurrency();

  const response = await fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}&order=gecko_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h`)

  return {
    props: {
      jsonData,
    },
  }
}

Recommended topics

Hot tags