export async function getFacebook() { const options = { headers: { Authorization: `Bearer ${process.env.STRAPI_API_TOKEN}`, }, }; try { const res = await fetch("http://localhost:1337/api/facebook-link", options); if (!res.ok) { throw new Error("Failed to fetch"); } const response = await res.json(); return response; } catch (error) { console.error("Error fetching Facebook data:", error); return null; } }

I'm currently working on two separate projects: a Next.js web application and a Strapi backend. My goal is to establish a connection between Strapi, which serves as my content management system (CMS), and Next.js, my frontend application.

In this integration, I've structured both projects to handle specific functionalities. For instance, within my Next.js app, I've created multiple folders, each designated for handling different aspects or functionalities. One such folder is responsible for fetching the Facebook URL from my Strapi API.

However, it appears that the communication or data transfer between the Next.js app and the Strapi API isn't functioning as expected. My primary objective is to take the data received from the Strapi API response—let's say, the Facebook URL—and use it as a slug or parameter to dynamically generate a link within my Next.js application directory.

At the moment, I'm facing challenges in properly integrating the fetched data from Strapi into my Next.js application, specifically in using that data to generate dynamic links or routes within the app itself.