Epic Next.js 15 Tutorial Part 3: Finishup up the homepage Features Section, TopNavigation and Footer

In part 3 of our series, let's finish building out our home page. We will finish up our Hero Section, then move to our Features Section, and finally add our Top Navigation and Footer.

• Part 1: Learn Next.js by building a website
• Part 2: Building Out The Hero Section of the homepage
• Part 3: Finishup up the homepage Features Section, TopNavigation and Footer
• Part 4: How to handle login and Authentification in Next.js
• Part 5: Building out the Dashboard page and upload file using NextJS server actions
• Part 6: Get Video Transcript with AI SDK
• Part 7: Strapi CRUD permissions
• Part 8: Search & pagination in Nextjs
• Part 9: Backend deployment to Strapi Cloud
• Part 10: Frontend deployment to Vercel

Let's refactor our Hero Section to use the Next Image component.

Instead of using it directly, we will create a new component called StrapiImage to add a few additional quality live improvements.

Inside src/app/components/custom, create a new file called strapi-image.tsx and paste it into the following code.

1import Image from "next/image";
2
3import { getStrapiURL } from "@/lib/utils";
4
5interface IStrapiMediaProps {
6  src: string;
7  alt: string | null;
8  height?: number;
9  width?: number;
10  className?: string;
11  fill?: boolean;
12  priority?: boolean;
13}
14
15export function getStrapiMedia(url: string | null) {
16  const strapiURL = getStrapiURL();
17  if (url == null) return null;
18  if (url.startsWith("data:")) return url;
19  if (url.startsWith("http") || url.startsWith("//")) return url;
20  return `${strapiURL}${url}`;
21}
22
23export function StrapiImage({
24  src,
25  alt,
26  className,
27  ...rest
28}: Readonly<IStrapiMediaProps>) {
29  const imageUrl = getStrapiMedia(src);
30  if (!imageUrl) return null;
31  return (
32    <Image
33      src={imageUrl}
34      alt={alt ?? "No alternative text provided"}
35      className={className}
36      {...rest}
37    />
38  );
39}

getStrapiMedia(): This function is designed to process media URLs from the Strapi CMS. It accepts a URL as a string or null.

If the input url is null, the function returns null, which could be used in cases where an image or media file is optional.

If the input URL starts with "data:", it is returned as-is. This condition checks for data URLs, which are URLs that contain actual data (e.g., base64-encoded images) instead of linking to an external resource.

This is often used to embed small images directly in HTML or CSS to reduce the number of HTTP requests.

If the input URL starts with "http" or "//", it is also returned as-is. This covers absolute URLs, meaning the media is hosted outside the Strapi backend (possibly on another domain or CDN).

If none of the above conditions are met, the function assumes the url is a relative path to a resource on the Strapi backend.

We ara also importing the following helper function called getStrapiURL; first, let's add it to our src/lib/utils.ts file and then review what it does.

1export function getStrapiURL() {
2  return process.env.NEXT_PUBLIC_STRAPI_URL ?? "http://localhost:1337";
3}

getStrapiURL(): This function returns the URL of the Strapi API. We are setting our environment name to NEXT_PUBLIC_, which will be available in both the server and client components.

Note: only set public for none private items when using NEXT_PUBLIC_, they will be seen by all. You can learn more in Next.js docs.

Now that we have our StrapiImage component let's use it in our Hero Section.

Navigate to src/app/components/custom/hero-section.tsx and make the following changes.

First, import our newly created component.

1import { StrapiImage } from "@/components/custom/strapi-image";

Second, replace the img tag with the following.

1<StrapiImage
2  alt={image.alternativeText ?? "no alternative text"}
3  className="absolute inset-0 object-cover w-full h-full aspect/16:9"
4  src={image.url}
5  height={1080}
6  width={1920}
7/>

The completed code should look like this:

1import Link from "next/link";
2import type { TImage, TLink } from "@/types";
3
4import { StrapiImage } from "./strapi-image";
5
6export interface IHeroSectionProps {
7  id: number;
8  documentId: string;
9  __component: string;
10  heading: string;
11  subHeading: string;
12  image: TImage;
13  link: TLink;
14}
15
16const styles = {
17  header: "relative h-[600px] overflow-hidden",
18  backgroundImage: "absolute inset-0 object-cover w-full h-full",
19  overlay:
20    "relative z-10 flex flex-col items-center justify-center h-full text-center text-white bg-black/50",
21  heading: "text-4xl font-bold md:text-5xl lg:text-6xl",
22  subheading: "mt-4 text-lg md:text-xl lg:text-2xl",
23  button:
24    "mt-8 inline-flex items-center justify-center px-6 py-3 text-base font-medium text-black bg-white rounded-md shadow hover:bg-gray-100 transition-colors",
25};
26
27export function HeroSection({ data }: { data: IHeroSectionProps }) {
28  if (!data) return null;
29
30  const { heading, subHeading, image, link } = data;
31
32  console.dir(data, { depth: null });
33  return (
34    <header className={styles.header}>
35      <StrapiImage
36        alt={image.alternativeText ?? "no alternative text"}
37        className="absolute inset-0 object-cover w-full h-full aspect/16:9"
38        src={image.url}
39        height={1080}
40        width={1920}
41      />
42      <div className={styles.overlay}>
43        <h1 className={styles.heading}>{heading}</h1>
44        <p className={styles.subheading}>{subHeading}</p>
45        <Link className={styles.button} href={link.href}>
46          {link.label}
47        </Link>
48      </div>
49    </header>
50  );
51}

When you restart the application, and... you will see the following error.

Clicking on the link in the error will take you here, which explains the steps to fix this.

Inside the root of your project, locate the next.config.ts file and make the following change.

1import type { NextConfig } from "next";
2
3const nextConfig: NextConfig = {
4  /* config options here */
5  images: {
6    remotePatterns: [
7      {
8        protocol: "http",
9        hostname: "localhost",
10        port: "1337",
11        pathname: "/uploads/**/*",
12      },
13    ],
14  },
15};
16
17export default nextConfig;

Now, when you restart your application, you should see the following with your image.

Nice, now let's work on our Features Section

Building Out Our Features Section

Modeling Our Features Section Data In Strapi

Looking at our Features Section UI, we can break it down into the following parts.

We have a section that has repeatable components with the following items.

• Icon
• Heading
• Subheading

So, let's jump into our Strapi Admin and create our Features Section Component.

Let's start by navigating to Content-Type Builder under COMPONENTS, clicking on Create new component, and let's call it Features Section and save it under the layout category.

We will create the following fields.

Text -> Short Text - title Text -> Long Text - description

Finally, let's create a repeatable component called Feature and save it under components.

Display Name -> Feature Category -> components Type: repeatable component Name: features

And add the following fields.

heading -> Text -> Short Text - heading subHeading -> Text -> Long Text - subHeading icon -> Enum -> with the following options

• CLOCK_ICON
• CHECK_ICON
• CLOUD_ICON

Let's add our newly created Feature Section component to our home page.

Now, let's add some features data and save.

Navigate to Content Manager, select the Home Page, add the new Features Section block, and fill in your features.

We are already getting our page data; let's navigate to src/app/page.tsx and update our query to populate our feature repeatable component.

Let's update the homePageQuery query with the following changes. Remember in Strapi 5 we have to user the on flag to populate our dynamic zone components.

1const homePageQuery = qs.stringify({
2  populate: {
3    blocks: {
4      on: {
5        "layout.hero-section": {
6          populate: {
7            image: {
8              fields: ["url", "alternativeText"],
9            },
10            link: {
11              populate: true,
12            },
13          },
14        },
15        "layout.features-section": {
16          populate: {
17            features: {
18              populate: true,
19            },
20          },
21        },
22      },
23    },
24  },
25});

Also, let's update our getStrapiData function to use our new helper method, getStrapiURL. So it will look like the following.

So don't forget to import it.

1import { getStrapiURL } from "@/lib/utils";

1async function getStrapiData(path: string) {
2  const baseUrl = getStrapiURL();
3  const url = new URL(path, baseUrl);
4  url.search = homePageQuery;
5
6  try {
7    const response = await fetch(url.href);
8    const data = await response.json();
9    return data;
10  } catch (error) {
11    console.error(error);
12  }
13}

Now, let's console log our block and see what the response looks like.

1console.dir(blocks, { depth: null });

We should see the following data.

1[
2  {
3    __component: "layout.hero-section",
4    id: 4,
5    heading: "Summarize Your Videos With Ease",
6    subHeading:
7      "Get back your time by getting all the key points with out watching the whole video.",
8    image: {
9      id: 2,
10      documentId: "bqs73cv7n0r7c08bsi2rdsww",
11      url: "/uploads/pexels_anna_nekrashevich_7552374_00d755b030.jpg",
12      alternativeText: null,
13    },
14    link: { id: 4, href: "/login", label: "Login", isExternal: null },
15  },
16  {
17    __component: "layout.features-section",
18    id: 2,
19    title: "Features",
20    description: "Checkout our cool features.",
21    feature: [
22      {
23        id: 4,
24        heading: "Save Time",
25        subHeading:
26          "No need to watch the entire video. Get the summary and save time.",
27        icon: "CLOCK_ICON",
28      },
29      {
30        id: 5,
31        heading: "Accurate Summaries",
32        subHeading: "Our AI-powered tool provides summaries of your content.",
33        icon: "CHECK_ICON",
34      },
35      {
36        id: 6,
37        heading: "Cloud Based",
38        subHeading: "Access your video summaries from anywhere at any time.",
39        icon: "CLOUD_ICON",
40      },
41    ],
42  },
43];

Notice that we are getting both our Hero Section and Features Section

Now, let's create a component to display our feature data.

Building Our Features Section Data In Next.js

Let's navigate to src/app/components/custom, create a file called features-section.tsx, and paste it into the following code.

1import React from "react";
2import { TFeature } from "@/types";
3
4export interface IFeaturesSectionProps {
5  id: number;
6  __component: string;
7  title: string;
8  description: string;
9  features?: TFeature[] | null;
10}
11
12function getIcon(name: string) {
13  switch (name) {
14    case "CLOCK_ICON":
15      return <ClockIcon className="w-12 h-12 mb-4 text-gray-900" />;
16    case "CHECK_ICON":
17      return <CheckIcon className="w-12 h-12 mb-4 text-gray-900" />;
18    case "CLOUD_ICON":
19      return <CloudIcon className="w-12 h-12 mb-4 text-gray-900" />;
20    default:
21      return null;
22  }
23}
24
25const styles = {
26  container: "flex-1",
27  section: "container px-4 py-6 mx-auto md:px-6 lg:py-24",
28  grid: "grid gap-8 md:grid-cols-3",
29  featureCard: "flex flex-col items-center text-center",
30  icon: "w-12 h-12 mb-4 text-gray-900",
31  heading: "mb-4 text-2xl font-bold",
32  description: "text-gray-500",
33};
34
35export function FeaturesSection({ data }: { data: IFeaturesSectionProps }) {
36  if (!data?.features) return null;
37  return (
38    <div>
39      <div className={styles.container}>
40        <section className={styles.section}>
41          <div className={styles.grid}>
42            {data.features.map((item: TFeature) => (
43              <div className={styles.featureCard} key={item.id}>
44                {getIcon(item.icon)}
45                <h2 className={styles.heading}>{item.heading}</h2>
46                <p className={styles.description}>{item.subHeading}</p>
47              </div>
48            ))}
49          </div>
50        </section>
51      </div>
52    </div>
53  );
54}
55
56function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
57  return (
58    <svg
59      {...props}
60      xmlns="http://www.w3.org/2000/svg"
61      width="24"
62      height="24"
63      viewBox="0 0 24 24"
64      fill="none"
65      stroke="currentColor"
66      strokeWidth="2"
67      strokeLinecap="round"
68      strokeLinejoin="round"
69    >
70      <polyline points="20 6 9 17 4 12" />
71    </svg>
72  );
73}
74
75function ClockIcon(props: React.SVGProps<SVGSVGElement>) {
76  return (
77    <svg
78      {...props}
79      xmlns="http://www.w3.org/2000/svg"
80      width="24"
81      height="24"
82      viewBox="0 0 24 24"
83      fill="none"
84      stroke="currentColor"
85      strokeWidth="2"
86      strokeLinecap="round"
87      strokeLinejoin="round"
88    >
89      <circle cx="12" cy="12" r="10" />
90      <polyline points="12 6 12 12 16 14" />
91    </svg>
92  );
93}
94
95function CloudIcon(props: React.SVGProps<SVGSVGElement>) {
96  return (
97    <svg
98      {...props}
99      xmlns="http://www.w3.org/2000/svg"
100      width="24"
101      height="24"
102      viewBox="0 0 24 24"
103      fill="none"
104      stroke="currentColor"
105      strokeWidth="2"
106      strokeLinecap="round"
107      strokeLinejoin="round"
108    >
109      <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
110    </svg>
111  );
112}

Let's navigate to src/app/page.tsx, import our newly created component, and see what we get.

1import { FeaturesSection } from "@/components/custom/features-section";

And update the return statement with the following code.

1return (
2  <main>
3    <HeroSection data={blocks[0]} />
4    <FeaturesSection data={blocks[1]} />
5  </main>
6);

When we restart our application and refresh the page with command + r, we should see the following.

Before getting too far let's update the way we load data. We will create a simple SDK that will allows us to easily fetch and mutated data.

In src folder, create a new folder called data with a new file called data-api.ts and add the following code:

fetch-data.tsx

1import type { TStrapiResponse } from "@/types";
2
3type HTTPMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
4
5type ApiOptions<P = Record<string, unknown>> = {
6  method: HTTPMethod;
7  payload?: P;
8  timeoutMs?: number;
9  authToken?: string;
10};
11
12/**
13 * Unified API function with timeout and optional authentication
14 *
15 * Features:
16 * - Supports all HTTP methods (GET, POST, PUT, PATCH, DELETE)
17 * - Optional authentication (includes Bearer token when authToken provided)
18 * - Timeout protection (8 seconds default)
19 * - Consistent error handling and response formatting
20 * - Handles DELETE requests without response body parsing
21 */
22
23async function apiWithTimeout(
24  input: RequestInfo,
25  init: RequestInit = {},
26  timeoutMs = 8000 // 8 seconds default - good balance between patience and UX
27): Promise<Response> {
28  // Create controller to manage request cancellation
29  const controller = new AbortController();
30
31  // Set up automatic cancellation after timeout period
32  const timeout = setTimeout(() => controller.abort(), timeoutMs);
33
34  try {
35    const response = await fetch(input, {
36      ...init,
37      signal: controller.signal, // Connect the abort signal to fetch
38    });
39    return response;
40  } finally {
41    // Always clean up the timeout to prevent memory leaks
42    // This runs whether the request succeeds, fails, or times out
43    clearTimeout(timeout);
44  }
45}
46
47export async function apiRequest<T = unknown, P = Record<string, unknown>>(
48  url: string,
49  options: ApiOptions<P>
50): Promise<TStrapiResponse<T>> {
51  const { method, payload, timeoutMs = 8000, authToken } = options;
52
53  // Set up base headers for JSON communication
54  const headers: Record<string, string> = {
55    "Content-Type": "application/json",
56  };
57
58  // Include Bearer token if provided (public requests when no token, authenticated when token provided)
59  if (authToken) {
60    headers["Authorization"] = `Bearer ${authToken}`;
61  }
62
63  try {
64    // Make the actual API request with timeout protection
65    const response = await apiWithTimeout(
66      url,
67      {
68        method,
69        headers,
70        // GET and DELETE requests don't have request bodies
71        body:
72          method === "GET" || method === "DELETE"
73            ? undefined
74            : JSON.stringify(payload ?? {}),
75      },
76      timeoutMs
77    );
78
79    // Handle DELETE requests that may not return JSON response body
80    if (method === "DELETE") {
81      return response.ok
82        ? { data: true as T, success: true, status: response.status }
83        : {
84            error: {
85              status: response.status,
86              name: "Error",
87              message: "Failed to delete resource",
88            },
89            success: false,
90            status: response.status,
91          };
92    }
93
94    // Parse the JSON response for all other methods
95    const data = await response.json();
96
97    // Handle unsuccessful responses (4xx, 5xx status codes)
98    if (!response.ok) {
99      console.error(`API ${method} error (${response.status}):`, {
100        url,
101        status: response.status,
102        statusText: response.statusText,
103        data,
104        hasAuthToken: !!authToken,
105      });
106
107      // If Strapi returns a structured error, pass it through as-is
108      if (data.error) {
109        return {
110          error: data.error,
111          success: false,
112          status: response.status,
113        };
114      }
115
116      // Otherwise create a generic error response
117      return {
118        error: {
119          status: response.status,
120          name: data?.error?.name ?? "Error",
121          message:
122            data?.error?.message ??
123            (response.statusText || "An error occurred"),
124        },
125        success: false,
126        status: response.status,
127      };
128    }
129
130    // Success case - extract Strapi data field to avoid double nesting
131    // Strapi returns: { data: {...}, meta: {...} }
132    // We want to return: { data: {...}, meta: {...}, success: true, status: 200 }
133    const responseData = data.data ? data.data : data;
134    const responseMeta = data.meta ? data.meta : undefined;
135    return {
136      data: responseData as T,
137      meta: responseMeta,
138      success: true,
139      status: response.status,
140    };
141  } catch (error) {
142    // Handle timeout errors specifically (when AbortController cancels the request)
143    if ((error as Error).name === "AbortError") {
144      console.error("Request timed out");
145      return {
146        error: {
147          status: 408,
148          name: "TimeoutError",
149          message: "The request timed out. Please try again.",
150        },
151        success: false,
152        status: 408,
153      } as TStrapiResponse<T>;
154    }
155
156    // Handle network errors, JSON parsing errors, and other unexpected issues
157    console.error(`Network or unexpected error on ${method} ${url}:`, error);
158    return {
159      error: {
160        status: 500,
161        name: "NetworkError",
162        message:
163          error instanceof Error ? error.message : "Something went wrong",
164      },
165      success: false,
166      status: 500,
167    } as TStrapiResponse<T>;
168  }
169}
170
171/**
172 * Convenience API methods that support both public and authenticated requests
173 *
174 * Usage examples:
175 * // Public request
176 * const homePage = await api.get<THomePage>('/api/home-page');
177 *
178 * // Authenticated request
179 * const userProfile = await api.get<TUser>('/api/users/me', { authToken: 'your-token' });
180 */
181export const api = {
182  get: <T>(
183    url: string,
184    options: { timeoutMs?: number; authToken?: string } = {}
185  ) => apiRequest<T>(url, { method: "GET", ...options }),
186
187  post: <T, P = Record<string, unknown>>(
188    url: string,
189    payload: P,
190    options: { timeoutMs?: number; authToken?: string } = {}
191  ) => apiRequest<T, P>(url, { method: "POST", payload, ...options }),
192
193  put: <T, P = Record<string, unknown>>(
194    url: string,
195    payload: P,
196    options: { timeoutMs?: number; authToken?: string } = {}
197  ) => apiRequest<T, P>(url, { method: "PUT", payload, ...options }),
198
199  patch: <T, P = Record<string, unknown>>(
200    url: string,
201    payload: P,
202    options: { timeoutMs?: number; authToken?: string } = {}
203  ) => apiRequest<T, P>(url, { method: "PATCH", payload, ...options }),
204
205  delete: <T>(
206    url: string,
207    options: { timeoutMs?: number; authToken?: string } = {}
208  ) => apiRequest<T>(url, { method: "DELETE", ...options }),
209};

Overview of API Utility Code

The code provides a unified API request utility with built-in authentication, error handling, and timeout protection. It ensures all HTTP requests are handled consistently across the application.

Key Components

Type Definitions

• HTTPMethod: Defines supported methods (GET, POST, PUT, PATCH, DELETE).
• ApiOptions: Options object including method, optional payload, and timeoutMs.

apiWithTimeout

• Wraps the native fetch with an AbortController.
• Prevents requests from hanging indefinitely by automatically cancelling them after a specified timeout (default: 8 seconds).

• Ensures proper cleanup with clearTimeout.

• Response Parsing: Extracts data and meta from Strapi responses for cleaner results.

Convenience Methods Exposes a simplified api object with methods for common operations:

• api.get(url)
• api.post(url, payload)
• api.put(url, payload)
• api.patch(url, payload)
• api.delete(url)

Each method automatically applies the unified logic from apiRequest.

Benefits

• Consistency: All requests use the same logic and error formatting.
• Resilience: Timeout protection prevents UI freezes from stalled servers.
• Security: Automatically includes authentication tokens when available.
• Convenience: Provides shorthand methods for common request types.
• Flexibility: Supports all HTTP methods and customizable timeouts.

Example Usage:

1// Public request
2const homePage = await api.get<THomePage>("/api/home-page");
3
4// Authenticated request
5const userProfile = await api.get<TUser>("/api/endpoint", { authToken });
6
7// Creating data
8const newPost = await api.post<TPost, TPostData>("/api/posts", {
9  title: "Hello",
10});

Now, let's utilized this by creating a specific loader to get our home page data.

In the data folder create a new file called loaders.ts and add the following code:

1import qs from "qs";
2import type { TStrapiResponse, THomePage } from "@/types";
3
4import { api } from "@/data/data-api";
5import { getStrapiURL } from "@/lib/utils";
6
7const baseUrl = getStrapiURL();
8
9async function getHomePageData(): Promise<TStrapiResponse<THomePage>> {
10  const query = qs.stringify({
11    populate: {
12      blocks: {
13        on: {
14          "layout.hero-section": {
15            populate: {
16              image: {
17                fields: ["url", "alternativeText"],
18              },
19              link: {
20                populate: true,
21              },
22            },
23          },
24          "layout.features-section": {
25            populate: {
26              features: {
27                populate: true,
28              },
29            },
30          },
31        },
32      },
33    },
34  });
35
36  const url = new URL("/api/home-page", baseUrl);
37  url.search = query;
38  return api.get<THomePage>(url.href);
39}
40
41export const loaders = {
42  getHomePageData,
43};

Placing this logic in a dedicated loaders.ts file brings several advantages:

• Clear separation of concerns – Pages handle only rendering, while all data-fetching logic lives in one place.
• Type safety – Using TStrapiResponse ensures compile-time error checking and provides full IntelliSense support when working with API data.
• Reusability – The fetchData utility can be used by multiple loaders, while each loader focuses on its specific query requirements.
• Easier maintenance – Centralizing API logic in a single location makes debugging and testing simpler compared to having data-fetching scattered across components.

Before updating our page.tsx to use our new loader, let's create one more utility to help us with simple error handling.

In the src/lib folder create a file called error-handler.ts and add the following:

1import { notFound } from "next/navigation";
2import type { TStrapiResponse } from "@/types";
3
4/**
5 * Handles API response errors consistently across all routes
6 *
7 * @param data - The API response data
8 * @param resourceName - Optional name of the resource for better error messages (e.g., "summary", "user")
9 * @throws Error when the response indicates failure (non-404 errors)
10 * @returns void - Function either succeeds silently or throws/redirects
11 */
12export function handleApiError<T>(
13  data: TStrapiResponse<T> | null | undefined,
14  resourceName?: string
15): void {
16  if (!data) {
17    throw new Error(`Failed to load ${resourceName || "resource"}`);
18  }
19
20  // Handle 404 errors specifically with notFound()
21  if (data?.error?.status === 404) {
22    notFound();
23  }
24
25  // Handle all other API errors
26  if (!data?.success || !data?.data) {
27    const errorMessage =
28      data?.error?.message || `Failed to load ${resourceName || "resource"}`;
29    throw new Error(errorMessage);
30  }
31}
32
33/**
34 * Validates and extracts data from API response, handling errors automatically
35 *
36 * @param data - The API response data
37 * @param resourceName - Optional name of the resource for better error messages
38 * @returns The extracted data from the response
39 * @throws Error when the response indicates failure
40 */
41export function validateApiResponse<T>(
42  data: TStrapiResponse<T> | null | undefined,
43  resourceName?: string
44): T {
45  handleApiError(data, resourceName);
46  return data!.data!;
47}

Now let's update our page.tsx file to use the new loader and validation function with the following code:

1import { loaders } from "@/data/loaders";
2import { validateApiResponse } from "@/lib/error-handler";
3
4import { HeroSection } from "@/components/custom/hero-section"; // add this
5import { FeaturesSection } from "@/components/custom/features-section";
6
7export default async function Home() {
8  const homePageData = await loaders.getHomePageData();
9  const data = validateApiResponse(homePageData, "home page");
10  const { blocks } = data;
11
12  return (
13    <main>
14      <HeroSection data={blocks[0]} />
15      <FeaturesSection data={blocks[1]} />
16    </main>
17  );
18}

Everything will still work as before, but we can make an improvement. Right now, our components are hardcoded, which works fine for now—but if we ever want to add more components in the future, it would be nice to handle them more dynamically.

To do this, we can create a block renderer function:

1function blockRenderer(block: TBlocks, index: number) {
2  switch (block.__component) {
3    case "layout.hero-section":
4      return <HeroSection key={index} data={block as IHeroSectionProps} />;
5    case "layout.features-section":
6      console.log("Sections data:", block);
7      return (
8        <FeaturesSection key={index} data={block as IFeaturesSectionProps} />
9      );
10    default:
11      return null;
12  }
13}

Import the IHeroSectionProps and IFeaturesSectionProps interfaces from their appropriate components.

1import {
2  HeroSection,
3  type IHeroSectionProps,
4} from "@/components/custom/hero-section";
5import {
6  FeaturesSection,
7  type IFeaturesSectionProps,
8} from "@/components/custom/features-section";

And create the following union type:

1// Union type of all possible block components
2export type TBlocks = IHeroSectionProps | IFeaturesSectionProps;

Update the code in the return with the following:

1<main>{blocks.map((block, index) => blockRenderer(block, index))}</main>

And finally in the srs/types/index.ts file make the following updates"

Import the TBlocks union type.

1import type { TBlocks } from "@/app/page";

And update the following

1export type THomePage = {
2  documentId: string;
3  title: string;
4  description: string;
5  createdAt: string;
6  updatedAt: string;
7  publishedAt: string;
8  blocks: TBlocks[]; // we remove the any type
9};

The completed code should look as follows:

1import { loaders } from "@/data/loaders";
2import { validateApiResponse } from "@/lib/error-handler";
3
4import {
5  HeroSection,
6  type IHeroSectionProps,
7} from "@/components/custom/hero-section";
8import {
9  FeaturesSection,
10  type IFeaturesSectionProps,
11} from "@/components/custom/features-section";
12
13// Union type of all possible block components
14export type TBlocks = IHeroSectionProps | IFeaturesSectionProps;
15
16function blockRenderer(block: TBlocks, index: number) {
17  switch (block.__component) {
18    case "layout.hero-section":
19      return <HeroSection key={index} data={block as IHeroSectionProps} />;
20    case "layout.features-section":
21      console.log("Sections data:", block);
22      return (
23        <FeaturesSection key={index} data={block as IFeaturesSectionProps} />
24      );
25    default:
26      return null;
27  }
28}
29
30export default async function Home() {
31  const homePageData = await loaders.getHomePageData();
32  const data = validateApiResponse(homePageData, "home page");
33  const { blocks } = data;
34
35  return (
36    <main>{blocks.map((block, index) => blockRenderer(block, index))}</main>
37  );
38}

Nice. Let's move on and start working on our Header and Footer

Building Our Header and Footer With Strapi and Next.js

Taking a quick look at our Header and Footer, we see that they are simple enough. In the header, we have two items, logo text and button.

In the footer, we have logo text, text, and social icons.

Let's first start by taking a look at how we have represented this data in Strapi.

Modeling Our Header and Footer Data in Strapi

We are going to store the data for our' Header' and' Footer' using a single type.'

Navigating to Content-Type Builder under SINGLE TYPE and clicking on Create new single type.

We are going to call it Global. Go ahead and add the following fields. It should follow the same steps when we built our Home Page single type.

Text -> Short Text - title Text -> Long Text - description

Now, let's create the Header component. To start with and we will add our

In Strapi, inside the global page, let's add the following component.

• Click on add another field to this single type.
• Select the Component field type
• Display Name will be Header
• Select Category will be layout
• Click on Configure the component button
• In the Name field, we will enter header
• Finally, click on the Add the first field to component button

Now let's create two additional components called logoText and ctaButton to store our logo text and call to action button data.

Since both will be links, we can reuse a previously created Link component.

• Select the Component field type
• Click on Use an existing component
• Click on the Select component button
• Inside the Select a component field, select Link component
• In the Name field, we will enter logoText

• Select Single component and click the Finish button

• Select Add another field to this component

• Select the Component field type
• Click on Use an existing component
• • Click on the Select a component button
• In the Name field, we will enter ctaButton
• Inside the Select a component field, select Link component
• Select Single component and click the Finish button
• Select Single component and click the Finish button

The final Header component should look like the following.

Now that we are getting the hang of modeling content think about how we can represent our footer.

• logoText
• text
• socialLink

We can create the Footer the same way we made our Header.

Can you do it on your own?

Our Footer will have the following fields.

Our footer has the following three items.

If you get stuck at any point, you can always ask in the comments or join us at Strapi Open Office hours on Discord 12:30 pm CST Monday - Friday.

Now just add some data in your Global compoent for both your header and footer.

Now, let's give the proper permissions so we can access the data from our Strapi API.

Navigate to Setting -> USERS AND PERMISSION PLUGIN -> Roles -> Public -> Global and check the find checkbox. We now should be able to make a GET request to /api/global and see our data.

Since we have already learned about Strapi's Populate, we can jump straight into our frontend code and implement the function to fetch our Global data.

Fetching Our Global Header and Footer Data

Let's navigate to src/data/loaders.ts and create a new function called getGlobalData; it should look like the following.

1async function getGlobalData(): Promise<TStrapiResponse<TGlobal>> {
2  const query = qs.stringify({
3    populate: [
4      "header.logoText",
5      "header.ctaButton",
6      "footer.logoText",
7      "footer.socialLink",
8    ],
9  });
10
11  const url = new URL("/api/global", baseUrl);
12  url.search = query;
13  return api.get<TGlobal>(url.href);
14}

Don't forget import TGlobal types at the top:

1import type { TStrapiResponse, THomePage, TGlobal } from "@/types";

And export the new loader:

1export const loaders = {
2  getHomePageData,
3  getGlobalData,
4};

One thing to notice here is that we are using array notation in populate, which is a great way to populate items that don't have many nested items.

If you need more help with Populate and Filtering in Strapi, check out this post.

Your loaders.ts file should look like the following:

1import qs from "qs";
2import type { TStrapiResponse, THomePage, TGlobal } from "@/types";
3
4import { api } from "@/data/data-api";
5import { getStrapiURL } from "@/lib/utils";
6
7const baseUrl = getStrapiURL();
8
9async function getHomePageData(): Promise<TStrapiResponse<THomePage>> {
10  const query = qs.stringify({
11    populate: {
12      blocks: {
13        on: {
14          "layout.hero-section": {
15            populate: {
16              image: {
17                fields: ["url", "alternativeText"],
18              },
19              link: {
20                populate: true,
21              },
22            },
23          },
24          "layout.features-section": {
25            populate: {
26              features: {
27                populate: true,
28              },
29            },
30          },
31        },
32      },
33    },
34  });
35
36  const url = new URL("/api/home-page", baseUrl);
37  url.search = query;
38  return api.get<THomePage>(url.href);
39}
40
41async function getGlobalData(): Promise<TStrapiResponse<TGlobal>> {
42  const query = qs.stringify({
43    populate: [
44      "header.logoText",
45      "header.ctaButton",
46      "footer.logoText",
47      "footer.socialLink",
48    ],
49  });
50
51  const url = new URL("/api/global", baseUrl);
52  url.search = query;
53  return api.get<TGlobal>(url.href);
54}
55
56export const loaders = {
57  getHomePageData,
58  getGlobalData,
59};

Now that we have our getGlobalData function let's use it.

Since our Header and Footer will live int the layout.tsx file, let's call our function there.

Since we can load data within our React Server Component, we can call the function there directly.

First, let's import our function.

1import { loaders } from "@/data/loaders";
2import { validateApiResponse } from "@/lib/error-handler";

Then, update the RootLayout with the following code.

1export default async function RootLayout({
2  children,
3}: Readonly<{
4  children: React.ReactNode;
5}>) {
6  const globalDataResponse = await loaders.getGlobalData();
7  const globalData = validateApiResponse(globalDataResponse, "global page");
8  console.dir(globalData, { depth: null });
9
10  return (
11    <html lang="en">
12      <body
13        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
14      >
15        {children}
16      </body>
17    </html>
18  );
19}

The complete code should look like the following.

1import type { Metadata } from "next";
2
3import { loaders } from "@/data/loaders";
4import { validateApiResponse } from "@/lib/error-handler";
5
6import { Geist, Geist_Mono } from "next/font/google";
7import "./globals.css";
8
9const geistSans = Geist({
10  variable: "--font-geist-sans",
11  subsets: ["latin"],
12});
13
14const geistMono = Geist_Mono({
15  variable: "--font-geist-mono",
16  subsets: ["latin"],
17});
18
19export const metadata: Metadata = {
20  title: "Create Next App",
21  description: "Generated by create next app",
22};
23
24export default async function RootLayout({
25  children,
26}: Readonly<{
27  children: React.ReactNode;
28}>) {
29  const globalDataResponse = await loaders.getGlobalData();
30  const globalData = validateApiResponse(globalDataResponse, "global page");
31  console.dir(globalData, { depth: null });
32
33  return (
34    <html lang="en">
35      <body
36        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
37      >
38        {children}
39      </body>
40    </html>
41  );
42}

Nice. Now restart your Next.js application, and we should see the following output in the terminal console.

{
  data: {
    id: 2,
    documentId: 'vcny1vttvfqm1hd8dd6390rp',
    title: 'Global Page',
    description: 'Responsible for our header and footer sections.',
    createdAt: '2025-08-14T00:02:31.328Z',
    updatedAt: '2025-08-14T00:02:31.328Z',
    publishedAt: '2025-08-14T00:02:31.336Z',
    header: {
      id: 2,
      ctaButton: { id: 12, href: '/signin', label: 'Sign In', isExternal: null },
      logoText: { id: 11, href: '/', label: 'Summarize AI', isExternal: false }
    },
    footer: {
      id: 2,
      text: 'Built with love by Paul 2025',
      socialLink: [
        {
          id: 14,
          href: 'www.youtube.com',
          label: 'YouTube',
          isExternal: true
        },
        {
          id: 15,
          href: 'www.linkedin.com',
          label: 'LinkedIn',
          isExternal: true
        },
        {
          id: 16,
          href: 'www.twitter.com',
          label: 'Twitter',
          isExternal: true
        }
      ],
      logoText: { id: 13, href: '/', label: 'Summarize AI', isExternal: null }
    }
  },
  meta: {}
}

That is amazing.

Building Our Header In Next.js

Alright, let's build out our Header component for our top navigation.

Just as a reminder, our logo has two items. A logo and button , so let's first create our Logo component.

Navigate to src/app/components/custom, create a file called logo.tsx, and add the following code.

1import Link from "next/link";
2
3const styles = {
4  link: "flex items-center gap-2",
5  icon: "h-6 w-6 text-pink-500",
6  text: {
7    base: "text-lg font-semibold",
8    light: "text-slate-900",
9    dark: "text-white",
10  },
11};
12
13function MountainIcon(props: React.SVGProps<SVGSVGElement>) {
14  return (
15    <svg
16      {...props}
17      xmlns="http://www.w3.org/2000/svg"
18      width="24"
19      height="24"
20      viewBox="0 0 24 24"
21      fill="none"
22      stroke="currentColor"
23      strokeWidth="2"
24      strokeLinecap="round"
25      strokeLinejoin="round"
26    >
27      <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
28    </svg>
29  );
30}
31
32interface ILogoProps {
33  text: string;
34  dark?: boolean;
35}
36
37export function Logo({ text, dark = false }: ILogoProps) {
38  return (
39    <Link className={styles.link} href="/">
40      <MountainIcon className={styles.icon} />
41      <span
42        className={`${styles.text.base} ${
43          dark ? styles.text.dark : styles.text.light
44        }`}
45      >
46        {text}
47      </span>
48    </Link>
49  );
50}