feat: add og image

Author: ryuapp

app/[lang]/layout.tsx

@@ -1,3 +1,4 @@
+import { Metadata } from "next";
 import { staticLangParams } from "../../lib/lang.ts";
 import { LangLayoutProps } from "../../lib/type.ts";
 import "../globals.css";
@@ -8,6 +9,19 @@ export function generateStaticParams() {
   return staticLangParams;
 }
 
+export async function generateMetadata({ params }: LangLayoutProps): Promise<Metadata> {
+  const lang = (await params).lang;
+  const title = lang === 'ja' ? 'ツールズ' : 'Tools';
+
+  return {
+    title,
+    openGraph: {
+      title,
+      images: `/${lang}/og.webp`,
+    },
+  };
+}
+
 export default async function RootLayout({
   children,
   params,

app/[lang]/og.webp/route.tsx

@@ -0,0 +1,40 @@
+import { ImageResponse } from 'next/og';
+
+export function generateStaticParams() {
+  return [
+    { lang: 'en' },
+    { lang: 'ja' },
+  ];
+}
+
+export async function GET(_: Request, { params }: { params: Promise<{ lang: string }> }) {
+  const lang = (await params).lang
+  const text = lang === 'ja' ? 'ツールズ' : 'Tools';
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#0a0a0a',
+          fontSize: 120,
+          fontWeight: 700,
+          color: 'white',
+        }}
+      >
+        <div>
+          {text}
+        </div>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    }
+  );
+}

deno.lock

@@ -2,6 +2,7 @@
   "private": true,
   "dependencies": {
     "@radix-ui/react-icons": "1.3.2",
+    "@vercel/og": "^0.8.5",
     "next": "15.5.3",
     "next-themes": "0.4.6",
     "react": "19.1.1",