[tag]0.1-vcci

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

@@ -3,6 +3,7 @@ import links from "@links/index";
 import {
   fetchDynamicPostById,
   fetchDynamicPostByExternalLink,
+  getDynamicPostSeoImage,
   getDynamicPostExcerpt,
   stripHtml,
 } from "./templates/data";
@@ -45,6 +46,7 @@ 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({
@@ -54,11 +56,6 @@ 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,
@@ -70,7 +67,7 @@ export async function generateMetadata({
       siteName: "VCCI HCM",
       images: [
         {
-          url: ogImageUrl,
+          url: imageUrl,
           width: 1200,
           height: 630,
           alt: title,
@@ -83,7 +80,7 @@ export async function generateMetadata({
       card: "summary_large_image",
       title,
       description,
-      images: [ogImageUrl],
+      images: [imageUrl],
     },
   };
 }

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>
-      ),
-      {
-        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 },
-    );
-  }
-}