Add footer API integration

app/blog/[slug]/page.tsx

@@ -6,6 +6,9 @@ import { fetchBlogList, fetchBlogDetail } from "@/api/blogsApi";
 import Sidebar from "@/app/blog/components/Sidebar";
 import { getCmsImageUrl } from "@/utils";
 
+// Force dynamic rendering to avoid build-time API calls
+export const dynamic = "force-dynamic";
+
 // Generate static params for all blog posts
 export async function generateStaticParams() {
     try {
@@ -20,65 +23,67 @@ export async function generateStaticParams() {
 }
 
 interface BlogDetailsPageProps {
-    params: Promise<{
-        slug: string;
-    }> | {
-        slug: string;
-    };
+    params:
+        | Promise<{
+              slug: string;
+          }>
+        | {
+              slug: string;
+          };
 }
 
 // SEO metadata cho từng bài blog (Open Graph / thumbnail khi share)
 export async function generateMetadata({
-  params,
+    params,
 }: {
-  params:
-    | Promise<{
-        slug: string;
-      }>
-    | {
-        slug: string;
-      };
+    params:
+        | Promise<{
+              slug: string;
+          }>
+        | {
+              slug: string;
+          };
 }): Promise<Metadata> {
-  const resolvedParams = params instanceof Promise ? await params : params;
-  const slug = resolvedParams.slug;
+    const resolvedParams = params instanceof Promise ? await params : params;
+    const slug = resolvedParams.slug;
 
-  try {
-    const blogResponse = await fetchBlogDetail(slug);
-    const post = blogResponse.data;
+    try {
+        const blogResponse = await fetchBlogDetail(slug);
+        const post = blogResponse.data;
 
-    const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
-    const url = `${siteUrl}/blog/${post.slug}`;
-    const imageUrl = post.featuredImage
-      ? getCmsImageUrl(post.featuredImage)
-      : `${siteUrl}/assets/img/inner-page/news-details/details-1.jpg`;
+        const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
+        const url = `${siteUrl}/blog/${post.slug}`;
+        const imageUrl = post.featuredImage
+            ? getCmsImageUrl(post.featuredImage)
+            : `${siteUrl}/assets/img/inner-page/news-details/details-1.jpg`;
 
-    return {
-      title: post.title,
-      description: post.excerpt,
-      openGraph: {
-        title: post.title,
-        description: post.excerpt,
-        url,
-        type: "article",
-        images: [
-          {
-            url: imageUrl,
-            alt: post.title,
-          },
-        ],
-      },
-      twitter: {
-        card: "summary_large_image",
-        title: post.title,
-        description: post.excerpt,
-        images: [imageUrl],
-      },
-    };
-  } catch {
-    return {
-      title: "Blog Details",
-    };
-  }
+        return {
+            title: post.title,
+            description: post.excerpt,
+            openGraph: {
+                title: post.title,
+                description: post.excerpt,
+                url,
+                type: "article",
+                images: [
+                    {
+                        url: imageUrl,
+                        alt: post.title,
+                    },
+                ],
+            },
+            twitter: {
+                card: "summary_large_image",
+                title: post.title,
+                description: post.excerpt,
+                images: [imageUrl],
+            },
+        };
+    } catch {
+        return {
+            title: "Blog Details",
+        };
+    }
 }
 
 export default async function BlogDetailsPage({ params }: BlogDetailsPageProps) {
@@ -100,18 +105,18 @@ export default async function BlogDetailsPage({ params }: BlogDetailsPageProps)
                             <div className="row g-4">
                                 <div className="col-lg-8 col-12">
                                     <div className="py-5">
-                            <h2>Post not found</h2>
-                            <p>The blog post you are looking for does not exist.</p>
-                            <Link href="/blog" className="theme-btn mt-3">
-                                Back to Blog <i className="fa-solid fa-arrow-right"></i>
-                            </Link>
+                                        <h2>Post not found</h2>
+                                        <p>The blog post you are looking for does not exist.</p>
+                                        <Link href="/blog" className="theme-btn mt-3">
+                                            Back to Blog <i className="fa-solid fa-arrow-right"></i>
+                                        </Link>
                                     </div>
                                 </div>
                                 {/* Sidebar on the right */}
                                 <Sidebar />
+                            </div>
                         </div>
                     </div>
-                </div>
                 </section>
             </>
         );