Lately, I've been exploring the world of web development by creating a web app using NextJS. While I have some knowledge of the basics in this field, I found myself a bit lost when working with NextJS since I hadn't worked with React before.
One of my challenges was fetching data from an API and incorporating it into my page. After struggling for a while, I managed to get it to work with the assistance of getServerSideProps.
My inquiry revolves around utilizing getServerSideProps multiple times within my application to fetch various other routes. I attempted to use getServerSideProps in a separate file, leverage its response in a function that I then export as a component for usage, aiming to "retrieve components of getServerSideProps responses" in a sense. Unfortunately, I encountered several errors during this process.
I would greatly appreciate it if someone could shed light on how this concept operates and offer guidance on resolving my issue. If my approach isn't feasible, I'm open to learning alternative methods to achieve the desired outcome.
For instance, let's consider an example involving Coinbase's API:
import { useState } from 'react'
import fetch from 'isomorphic-fetch'
export const getServerSideProps = async () => {
const res = await fetch('https://api.coinbase.com/v2/prices/ETH-USD/buy')
const data = await res.json()
return {
props: {
ethprice: data
}
}
};
Subsequently, I incorporate "ethprice" in my Home function like so:
export default function Home({ ethprice }) {
return (
[page content, divs, text etc...]
{etherprice.data.amount}
Thank you!