feat: add custom SEO image optimization endpoint with sharp

- Add sharp@0.34.5 dependency for server-side image processing
- Create /api/seo-image endpoint to resize og:images to 1200x630 JPEG
- Replace toOptimizedSeoImageUrl with toSeoImageUrl routing through custom endpoint
- Implement host validation to prevent open proxy abuse (allow vcci-hcm.org.vn, vccihcm.vn)
- Add automatic fallback to /thumbnail.png when source image fails
- Set aggressive caching headers (max-age=86400, s-maxage=2592000)
- Support both absolute

package.json

@@ -58,6 +58,7 @@
     "react-dom": "19.2.0",
     "react-hook-form": "^7.65.0",
     "react-resizable-panels": "^3.0.6",
+    "sharp": "0.34.5",
     "sonner": "^2.0.7",
     "swiper": "^12.0.3",
     "tailwind-merge": "^3.3.1",

pnpm-lock.yaml

@@ -152,6 +152,9 @@ importers:
       react-resizable-panels:
         specifier: ^3.0.6
         version: 3.0.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      sharp:
+        specifier: 0.34.5
+        version: 0.34.5
       sonner:
         specifier: ^2.0.7
         version: 2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -327,9 +330,6 @@ packages:
   '@emnapi/runtime@1.11.3':
     resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
 
-  '@emnapi/runtime@1.6.0':
-    resolution: {integrity: sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==}
-
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
@@ -4063,11 +4063,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.6.0':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/wasi-threads@1.1.0':
     dependencies:
       tslib: 2.8.1
@@ -4259,8 +4254,7 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@img/colour@1.0.0':
-    optional: true
+  '@img/colour@1.0.0': {}
 
   '@img/sharp-darwin-arm64@0.34.5':
     optionalDependencies:
@@ -4395,7 +4389,7 @@ snapshots:
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.6.0
-      '@emnapi/runtime': 1.6.0
+      '@emnapi/runtime': 1.11.3
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -7474,7 +7468,6 @@ snapshots:
       '@img/sharp-win32-arm64': 0.34.5
       '@img/sharp-win32-ia32': 0.34.5
       '@img/sharp-win32-x64': 0.34.5
-    optional: true
 
   shebang-command@2.0.0:
     dependencies:

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

@@ -6,10 +6,23 @@ import {
   getDynamicPostSeoImage,
   getDynamicPostExcerpt,
   stripHtml,
-  toOptimizedSeoImageUrl,
 } from "./templates/data";
 import DynamicPageClient from "./DynamicPageClient";
 
+/**
+ * Build an absolute og:image URL routed through the custom /api/seo-image
+ * endpoint which resizes the source image to 1200x630 JPEG (~a few hundred KB)
+ * so social media crawlers receive a reasonably-sized image instead of the
+ * original full-resolution upload (which can be 5+ MB and get rejected by
+ * Twitter/Zalo/Facebook).
+ */
+function toSeoImageUrl(imageUrl: string): string {
+  if (!imageUrl) return "";
+  const origin = (links.siteURL || "").replace(/\/+$/, "");
+  const encoded = encodeURIComponent(imageUrl);
+  return `${origin}/api/seo-image?url=${encoded}`;
+}
+
 type GenerateMetadataArgs = {
   params: Promise<{ slug: string[] }>;
   searchParams: Promise<{ id?: string; categoryId?: string }>;
@@ -75,9 +88,9 @@ export async function generateMetadata({
     "Tin tức từ VCCI HCM";
   const rawImageUrl = getDynamicPostSeoImage(post);
   const isImageValid = await isRemoteImageValid(rawImageUrl);
-  const imageUrl = isImageValid
-    ? toOptimizedSeoImageUrl(rawImageUrl)
-    : toOptimizedSeoImageUrl("/thumbnail.png");
+  const imageUrl = toSeoImageUrl(
+    isImageValid ? rawImageUrl : "/thumbnail.png",
+  );
   const articleUrl = `${links.siteURL.replace(/\/+$/, "")}${path}${postId || categoryIdParam
     ? `?${new URLSearchParams({
       ...(postId && { id: postId }),

src/app/api/seo-image/route.ts

+import { NextRequest, NextResponse } from "next/server";
+import sharp from "sharp";
+import links from "@/links";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const ALLOWED_HOSTS = ["vcci-hcm.org.vn", "vccihcm.vn"];
+const OUTPUT_WIDTH = 1200;
+const OUTPUT_HEIGHT = 630;
+const OUTPUT_QUALITY = 80;
+
+type FetchResult = {
+  ok: boolean;
+  buffer?: Buffer;
+  contentType?: string;
+};
+
+/**
+ * Resolve a relative path (e.g. "/thumbnail.png") to an absolute URL on the
+ * current site so we can fetch it from the local server.
+ */
+function resolveAbsoluteUrl(value: string): string {
+  if (/^https?:\/\//i.test(value)) return value;
+  const origin = (links.siteURL || "").replace(/\/+$/, "");
+  return `${origin}${value.startsWith("/") ? "" : "/"}${value}`;
+}
+
+/**
+ * Validate that an absolute URL points to one of the allowed image hosts so
+ * the endpoint cannot be abused as an open proxy.
+ */
+function isAllowedHost(url: string): boolean {
+  try {
+    const parsed = new URL(url);
+    return ALLOWED_HOSTS.includes(parsed.hostname);
+  } catch {
+    return false;
+  }
+}
+
+async function fetchImage(url: string): Promise<FetchResult> {
+  try {
+    const response = await fetch(url, {
+      signal: AbortSignal.timeout(10000),
+      redirect: "follow",
+    });
+
+    if (!response.ok) return { ok: false };
+
+    const contentType = response.headers.get("content-type") ?? "";
+    if (!contentType.startsWith("image/")) return { ok: false };
+
+    const arrayBuffer = await response.arrayBuffer();
+    return { ok: true, buffer: Buffer.from(arrayBuffer), contentType };
+  } catch {
+    return { ok: false };
+  }
+}
+
+async function optimizeImage(buffer: Buffer): Promise<Buffer> {
+  return sharp(buffer)
+    .resize(OUTPUT_WIDTH, OUTPUT_HEIGHT, {
+      fit: "cover",
+      position: "attention",
+      withoutEnlargement: true,
+    })
+    .jpeg({ quality: OUTPUT_QUALITY, mozjpeg: true })
+    .toBuffer();
+}
+
+export async function GET(request: NextRequest) {
+  const urlParam = request.nextUrl.searchParams.get("url")?.trim() ?? "";
+
+  if (!urlParam) {
+    return new NextResponse("Missing url parameter", { status: 400 });
+  }
+
+  const absoluteUrl = resolveAbsoluteUrl(urlParam);
+
+  if (!isAllowedHost(absoluteUrl)) {
+    return new NextResponse("Host not allowed", { status: 403 });
+  }
+
+  const fetched = await fetchImage(absoluteUrl);
+
+  let imageBuffer: Buffer;
+
+  if (fetched.ok && fetched.buffer) {
+    const optimized = await optimizeImage(fetched.buffer).catch(() => null);
+    imageBuffer = optimized ?? fetched.buffer;
+  } else {
+    const fallbackUrl = resolveAbsoluteUrl("/thumbnail.png");
+    const fallback = await fetchImage(fallbackUrl);
+    if (!fallback.ok || !fallback.buffer) {
+      return new NextResponse("Image not found", { status: 404 });
+    }
+    const optimized = await optimizeImage(fallback.buffer).catch(() => null);
+    imageBuffer = optimized ?? fallback.buffer;
+  }
+
+  return new NextResponse(new Uint8Array(imageBuffer), {
+    status: 200,
+    headers: {
+      "Content-Type": "image/jpeg",
+      "Cache-Control":
+        "public, max-age=86400, s-maxage=2592000, stale-while-revalidate=604800",
+      "X-Content-Type-Options": "nosniff",
+    },
+  });
+}
+
+export async function HEAD(request: NextRequest) {
+  const urlParam = request.nextUrl.searchParams.get("url")?.trim() ?? "";
+
+  if (!urlParam) {
+    return new NextResponse(null, { status: 400 });
+  }
+
+  const absoluteUrl = resolveAbsoluteUrl(urlParam);
+
+  if (!isAllowedHost(absoluteUrl)) {
+    return new NextResponse(null, { status: 403 });
+  }
+
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      "Content-Type": "image/jpeg",
+      "Cache-Control":
+        "public, max-age=86400, s-maxage=2592000, stale-while-revalidate=604800",
+    },
+  });
+}