'how can i use context API and getserversideprops in nextjs

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 call it in my home page without passing it to getServerSideprops is working fine. please can someone 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,
    },
  }
}

Solution 1:^[1]

It's about client and server side code. getServerSideProps execute in server side and context is for client side. You will not get client context in server side. You can use swr for client side data fetch. context will work smoothly with swr.

Otherwise you can store the currency in cookies and you can get the value from cookie in server side.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Tamzid Ahmed

'how can i use context API and getserversideprops in nextjs

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]