feat: Implement blog API service and refactor components for improved data fetching

app/blog/[slug]/page.tsx

@@ -1,8 +1,10 @@
 import Link from "next/link";
+import type { Metadata } from "next";
 import Breadcrumb from "@/app/components/Breadcrumb";
 import NewsDetailsSection from "./components/NewsDetailsSection";
-import { fetchBlogList, fetchBlogDetail } from "@/api/blog";
+import { fetchBlogList, fetchBlogDetail } from "@/api/blogsApi";
 import Sidebar from "@/app/blog/components/Sidebar";
+import { getCmsImageUrl } from "@/utils";
 
 // Generate static params for all blog posts
 export async function generateStaticParams() {
@@ -25,6 +27,60 @@ interface BlogDetailsPageProps {
     };
 }
 
+// SEO metadata cho từng bài blog (Open Graph / thumbnail khi share)
+export async function generateMetadata({
+  params,
+}: {
+  params:
+    | Promise<{
+        slug: string;
+      }>
+    | {
+        slug: string;
+      };
+}): Promise<Metadata> {
+  const resolvedParams = params instanceof Promise ? await params : params;
+  const slug = resolvedParams.slug;
+
+  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`;
+
+    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) {
     // Handle both Promise and direct object
     const resolvedParams = params instanceof Promise ? await params : params;