how can i use context API and getserversideprops in nextjs

user_17731079 0
Viewed 1554

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,
    },
  }
}
use-context react-context next.js
1 Answers

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.

user_124209170
Related