feat: ✨ add og api

src/app/[locale]/layout.tsx

@@ -3,18 +3,23 @@ import Footer from "~/components/layout/footer";
 import Header from "~/components/layout/header";
 import ThemeProvider from "~/components/shared/theme-provider";
 import { Toaster } from "~/components/ui/toaster";
-import { siteConfig } from "~/config/site";
+import { siteConfig, siteUrl } from "~/config/site";
 import { I18nProviderClient } from "~/locales/client";
+import { getScopedI18n } from "~/locales/server";
 
 type Props = {
   params: { locale: string };
   searchParams: { [key: string]: string | string[] | undefined };
 };
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const locale = params.locale || "en";
+  const locale = params.locale;
   const site = siteConfig(locale);
 
+  const t = await getScopedI18n("hero");
+  const title = t("main");
+  const siteOgImage = `${siteUrl}/api/og?title=${title}`;
+
   return {
     title: {
       default: site.name,
@@ -42,14 +47,14 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     creator: "moinulmoin",
     openGraph: {
       type: "website",
-      locale: "en_US",
+      locale: locale,
       url: site.url,
       title: site.name,
       description: site.description,
       siteName: site.name,
       images: [
         {
-          url: site.ogImage,
+          url: siteOgImage,
           width: 1200,
           height: 630,
           alt: site.name,
@@ -60,7 +65,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
       card: "summary_large_image",
       title: site.name,
       description: site.description,
-      images: [site.ogImage],
+      images: [siteOgImage],
       creator: "@immoinulmoin",
     },
     icons: {

src/app/api/og/route.ts

@@ -0,0 +1,32 @@
+import { ImageResponse } from "next/og";
+import { RenderIMGEl } from "~/components/OGImgEl";
+import Logo from "../../../../public/chad-next.png";
+
+export const runtime = "edge";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const hasTitle = searchParams.has("title");
+  const title = hasTitle
+    ? searchParams.get("title")
+    : "Quick Starter Template for your Next project";
+
+  try {
+    return new ImageResponse(
+      RenderIMGEl({
+        logo: process.env.NEXT_PUBLIC_APP_URL + Logo.src,
+        title: title as string,
+      }),
+      {
+        width: 1200,
+        height: 630,
+      }
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (e: any) {
+    console.log(`${e.message}`);
+    return new Response(`Failed to generate the image`, {
+      status: 500,
+    });
+  }
+}

src/app/[locale]/opengraph-image.tsx → src/app/opengraph-image.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from "next/og";
 import { getScopedI18n } from "~/locales/server";
-import Logo from "../../../public/chad-next.png";
+import Logo from "../../public/chad-next.png";
 
 export const runtime = "edge";
 export const contentType = "image/png";

src/components/OGImgEl.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable @next/next/no-img-element */
+export const RenderIMGEl = ({
+  logo,
+  title,
+}: {
+  logo: string;
+  title: string;
+}) => {
+  return (
+    <div
+      style={{
+        backgroundImage:
+          "linear-gradient(to bottom right, #E0E7FF 25%, #ffffff 50%, #CFFAFE 75%)",
+      }}
+      tw="h-full w-full flex flex-col items-center justify-center bg-white"
+    >
+      <img
+        src={logo}
+        alt="ChadNext Logo"
+        tw="w-20 h-20 mb-4 opacity-95"
+        width={80}
+        height={80}
+      />
+      <h1
+        style={{
+          fontSize: "80px",
+          fontWeight: 900,
+          background:
+            "linear-gradient(to bottom right, #000000 21.66%, #78716c 86.47%)",
+          backgroundClip: "text",
+          color: "transparent",
+          lineHeight: "5rem",
+          letterSpacing: "-0.02em",
+        }}
+      >
+        ChadNext
+      </h1>
+      <h2
+        style={{
+          fontSize: "40px",
+          fontWeight: 700,
+          lineHeight: "5rem",
+          letterSpacing: "-0.02em",
+        }}
+      >
+        {title}
+      </h2>
+    </div>
+  );
+};