Trying to get json from a link and destructuring the data to use for the site. I have a getStaticProps export function that strips the data then I want to pass it into my default Home function and map through it. I have read about "rejectUnauthorised: false" but not sure if that is the fix.
If I click the link I get a ssl warning
export default function Home({ exp }) {
return (
<div className="">
<Head>
<title>Main Site</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Header />
<Banner />
<main className="max-w-7xl mx-auto px-8 sm:px-16">
<section className="pt-6">
<h2 className="text-4xl font-semibold pb-5">Explore Nearby</h2>
{exp?.map((item) => (
<h1>{item.location}</h1>
))}
</section>
</main>
</div>
);
}
export async function getStaticProps() {
const exp = await fetch(
'https://links.papareact.com/pyp'
).then((res) => res.json());
return {
props: {
exp,
};
}
Finally solved this issue. I needed to enact "rejectUnauthorized: false" in my export async function as below along with a few other things. But the code below did the trick. Then passed "data" as my prop and used it in my mapping.
export async function getStaticProps() {
const res = await fetch('https://links.papareact.com/pyp', {
agent: httpsAgent,
});
const data = await res.json();
return {
props: {
data: data,
},
};
}