Epic Next.js 14 Tutorial: Learn Next JS by building a real-life project: Part 1

13

Great tutorial. I succeeded everywhere except the last step. I pasted this into page.tsx, but don’t understand your comment about ‘refactoring’ it. Just pasting and saving results in a blank page:

async function getStrapiData(url: string) {
  const baseUrl = "http://localhost:1337";
  try {
    const response = await fetch(baseUrl + url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

export default async function Home() {
  const strapiData = await getStrapiData("/api/home-page");

  const { title, description } = strapiData.data;

  return (
    <main className="container mx-auto py-6">
      <h1 className="text-5xl font-bold">{title}</h1>
      <p className="text-xl mt-4">{description}</p>
    </main>
  );
}

It appears to fetch the page data from strapi

[2024-11-10 12:32:35.720] http: GET /api/home-page (35 ms) 200

And the front end returns 200 also

 GET / 200 in 446ms
 GET /favicon.ico 200 in 28ms

I’m at a loss and apologize, I am new.