feat: tao dynamic OG image 1200x630 bang next/og - auto fit anh bai viet + title overlay

src/app/(main)/[...slug]/page.tsx

@@ -3,7 +3,6 @@ import links from "@links/index";
 import {
   fetchDynamicPostById,
   fetchDynamicPostByExternalLink,
-  getDynamicPostSeoImage,
   getDynamicPostExcerpt,
   stripHtml,
 } from "./templates/data";
@@ -46,7 +45,6 @@ export async function generateMetadata({
     stripHtml(post.summary) ||
     getDynamicPostExcerpt(post).slice(0, 160) ||
     "Tin tức từ VCCI HCM";
-  const imageUrl = getDynamicPostSeoImage(post);
   const articleUrl = `${links.siteURL.replace(/\/+$/, "")}${path}${
     postId || categoryIdParam
       ? `?${new URLSearchParams({
@@ -56,6 +54,11 @@ export async function generateMetadata({
       : ""
   }`;
 
+  const ogImageParams = new URLSearchParams();
+  if (postId) ogImageParams.set("id", postId);
+  if (!postId && slug?.length) ogImageParams.set("slug", slug.join("/"));
+  const ogImageUrl = `/api/og-post?${ogImageParams.toString()}`;
+
   return {
     title,
     description,
@@ -67,7 +70,7 @@ export async function generateMetadata({
       siteName: "VCCI HCM",
       images: [
         {
-          url: imageUrl,
+          url: ogImageUrl,
           width: 1200,
           height: 630,
           alt: title,
@@ -80,7 +83,7 @@ export async function generateMetadata({
       card: "summary_large_image",
       title,
       description,
-      images: [imageUrl],
+      images: [ogImageUrl],
     },
   };
 }

src/app/api/og-post/route.tsx

+import { ImageResponse } from "next/og";
+import {
+  fetchDynamicPostById,
+  fetchDynamicPostByExternalLink,
+  getDynamicPostSeoImage,
+  getDynamicPostExcerpt,
+  stripHtml,
+} from "@/app/(main)/[...slug]/templates/data";
+
+export const runtime = "nodejs";
+export const revalidate = 3600;
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id") ?? "";
+    const slug = searchParams.get("slug") ?? "";
+
+    let post = null;
+    try {
+      post = id
+        ? await fetchDynamicPostById(id)
+        : slug
+          ? await fetchDynamicPostByExternalLink(`/${slug}`)
+          : null;
+    } catch {
+      post = null;
+    }
+
+    const title = post?.title ?? "VCCI HCM";
+    const description =
+      stripHtml(post?.summary) ||
+      (post ? getDynamicPostExcerpt(post).slice(0, 120) : "");
+    const imageUrl = post ? getDynamicPostSeoImage(post) : "";
+    const hasImage = imageUrl && imageUrl !== "/thumbnail.png";
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            width: 1200,
+            height: 630,
+            backgroundColor: "#0a4d8c",
+            position: "relative",
+            fontFamily: "sans-serif",
+          }}
+        >
+          {hasImage && (
+            <img
+              src={imageUrl}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: 1200,
+                height: 630,
+                objectFit: "cover",
+              }}
+            />
+          )}
+
+          <div
+            style={{
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              display: "flex",
+              flexDirection: "column",
+              padding: "48px 56px",
+              background:
+                "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%)",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                marginBottom: 16,
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundColor: "#fff",
+                  borderRadius: 6,
+                  padding: "6px 14px",
+                  fontSize: 22,
+                  fontWeight: 700,
+                  color: "#0a4d8c",
+                }}
+              >
+                VCCI-HCM
+              </div>
+            </div>
+
+            <div
+              style={{
+                display: "flex",
+                fontSize: 42,
+                fontWeight: 700,
+                color: "#ffffff",
+                lineHeight: 1.25,
+                maxHeight: 120,
+                overflow: "hidden",
+              }}
+            >
+              {title}
+            </div>
+
+            {description && (
+              <div
+                style={{
+                  display: "flex",
+                  fontSize: 22,
+                  color: "rgba(255,255,255,0.85)",
+                  marginTop: 12,
+                  lineHeight: 1.4,
+                  maxHeight: 65,
+                  overflow: "hidden",
+                }}
+              >
+                {description}
+              </div>
+            )}
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      },
+    );
+  } catch {
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 1200,
+            height: 630,
+            backgroundColor: "#0a4d8c",
+            color: "#ffffff",
+            fontSize: 48,
+            fontWeight: 700,
+            fontFamily: "sans-serif",
+          }}
+        >
+          VCCI-HCM
+        </div>
+      ),
+      { width: 1200, height: 630 },
+    );
+  }
+}