1

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.

BigOunce
  • 11
  • 2
  • You're not calling `getServerSideProps` or using `products` prop in your `Products` component. – technophyle Aug 16 '23 at 21:01
  • Even if I add a

    {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
  • it seems like you are using nextjs13 since you are using the `app` folder but`getServerSideProps` is deprecated in nextjs13, you need to take a look [here](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#:~:text=third-party%20libraries.-,Fetching%20Data%20on%20the%20Server%20with%20fetch,rendering%20a%20React%20component%20tree.) – Ahmed Sbai Aug 16 '23 at 22:26
  • That worked! Thank you man! – BigOunce Aug 16 '23 at 23:29

0 Answers0