So I'm trying to get data from Strapi, I've set everything up according to their QuickStart Guide. But I get nothing logged in either the terminal or the browser.
When I go to the url http://localhost:1337/api/products with the server running it shows everything I need but I still can't seem to be able to get that data to show up in my nextjs project.
This is how I've set up my page in the directory app/products/page.js
import React from "react";
import { fetchQuery } from "../utils";
export default function Products({ products }) {
return <div>Products</div>;
}
export async function getServerSideProps() {
const products = await fetchQuery("products");
console.log("Hello");
return {
props: {
products,
},
};
}
And this is the fetchQuery function:
const baseUrl = process.env.BASE_URL;
async function fetchQuery(path, params = null) {
console.log("In the query");
let url;
if (params !== null) {
url = `${baseUrl}/${path}/${params}`;
else {
url = `${baseUrl}/${path}`;
}
const response = await fetch(`${url}`);
const data = await response.json();
return data;
}
export { baseUrl, fetchQuery };
This is definitely a noob mistake on my part since I can't figure out something so simple after so many retries and making the project again and again.
{products[0].Title}
it just returns a cannot read undefined error.. I thought getServerSideProps and getStaticProps got called instantly when the component/page gets run. :S – BigOunce Aug 16 '23 at 21:10