NextJS App Route Build Issues in Production Api Calls Data

I have created a website named “Clush Sport” using Next.js with app routes and implementing server-side rendering.

The issue I’m encountering is that even after removing all the featured products from the backend, I am still receiving the featured product inside the build.

So here the sample code.

import ChampionsinAction from "@/components/home/ChampionsinAction";
import FeaturedProduct from "@/components/home/FeaturedProduct";
import HomeBanner from "@/components/home/HomeBanner";
import HomeBlog from "@/components/home/HomeBlog";
import HomeDeisgnTool from "@/components/home/HomeDeisgnTool";
import HomeSample from "@/components/home/HomeSample";
import HomeSteps from "@/components/home/HomeSteps";
import HomeTrust from "@/components/home/HomeTrust";
import BlogService from "@/service/BlogService";
import ContentService from "@/service/ContentService";
import ProductService from "@/service/ProductService";
import SettingsService from "@/service/SettingsService";

export default async function Home() {
  const data = await getFeaturedProducts();
  const blogData = await getBlogs();
  const sampleProducts = await getSampleProducts();
  const testimonials = await getstestimonials();
  const pageData = await getPageContent();

  const bannersection = pageData.sections.find(
    (el: any) => el.title === "Home Banner"
  );

  const FeaturedProducts = pageData.sections.find(
    (el: any) => el.title === "Featured Products"
  );

  const HomeStepsData = pageData.sections.find(
    (el: any) => el.title === "Easy As 1, 2 & 3"
  );
  const HomeSampleData = pageData.sections.find(
    (el: any) => el.title === "See, Feel, Believe"
  );
  const ChampionsinActionData = pageData.sections.find(
    (el: any) => el.title === "Champions in action"
  );

  const BuiltOnTrustData = pageData.sections.find(
    (el: any) => el.title === "Built On Trust"
  );

  const blogsData = pageData.sections.find((el: any) => el.title === "Latest on clush sports");
  console.log("pageData", pageData);

  return (
    <main>
      <HomeBanner data={bannersection} />
      <HomeDeisgnTool />
      <FeaturedProduct products={data} data={FeaturedProducts} />
      <HomeSteps data={HomeStepsData} />
      <HomeSample products={sampleProducts} data={HomeSampleData} />
      <ChampionsinAction data={ChampionsinActionData} />
      <HomeTrust testimonials={testimonials} data={BuiltOnTrustData} />
      <HomeBlog blogData={blogData} data={blogsData} />
    </main>
  );
}

async function getPageContent() {
  let name = "home";
  const data = ContentService.getContentData(name);
  return data;
}

async function getFeaturedProducts() {
  const products = ProductService.getFeaturedProducts(null);
  return products;
}

async function getBlogs() {
  const blogs = BlogService.getFrontBlogs(null);
  return blogs;
}

async function getSampleProducts() {
  const products = ProductService.getHomeSampleProducts(null);
  return products;
}

async function getstestimonials() {
  const testimonials = SettingsService.getTestimonials(null);
  return testimonials;
}

FeaturedProduct.tsx

"use client";
import { Suspense } from "react";
import Carousel from "../reuseable/Carousel";

const FeaturedProduct = ({ products, data }: any) => {
  console.log("products: ", products);
  let blockData = data?.blocks[0];
  console.log("blockData", blockData);

  return (
    <>
      <div className="home-featured-pro float-left mt-[60px] lgx:mt-[90px] w-full pt-[53px] pb-[60px] lgx:pb-13">
        <div className="container mx-auto">
          <h2 className="text-4xl md:text-5xl lgx:text-64px font-bold leading-noraml tracking-[1.28px] text-center text-black mb-3">
            {blockData.title}
          </h2>
          <></>
          <p
            className="text-center text-lg lg:text-xl font-medium tracking-[0.48px] captilize w-full max-w-[1173px] mx-auto mb-[23px] lgx:mb-10"
            dangerouslySetInnerHTML={{ __html: blockData.description }}
          ></p>
        </div>
        <div className="featured-slider centerSlider w-full">
          <Carousel
            slides={products}
            // carouselSettings={carouselSettings}
            buttontext={"Costomize Now"}
            buttonClass="customize-now w-[calc(100%-40px)] md:w-[calc(100%-(40px*2))] 2xl:w-[calc(100%-(68px*2))] text-xl md:text-2xl font-bold leading-noraml tracking-[0.48px] uppercase text-white text-center mx-auto block bg-w-blue hover:bg-w-green px-4 py-6 absolute bottom-[20px] lgx:bottom-[68px] left-1/2 -translate-x-1/2 opacity-0 invisible"
            nav={true}
            dots={false}
          />
        </div>
      </div>
    </>
  );
};

export default FeaturedProduct;

Alright, so this is not just the issue with FeaturedProduct; every section has the same issue.